关于react中antd design pro下面src/models

1.src/models

　　在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

　　1.UI 组件交互操作；
　　2.调用 model 的 effect；
　　3.调用统一管理的 service 请求函数；
　　4.使用封装的 request.ts 发送请求；
　　5.获取服务端返回；
　　6.然后调用 reducer 改变 state；
　　7.更新 model。

 // model
 {
   namespace: String, // 命名空间
   state: Object, // 状态
   reducer: Object, // 同步更新 state
   effects: Object, // 副作用：处理异步逻辑
   subscriptions: Object // 订阅数据源
 }　

　　这些文件被引用在src/pages/.umi/dva中。

　　我们以 models/global 为例:

　　namespace: 'global' 说明以下此处的dva命名空间为 global，即你调用的时候需要采用 global.XXX 的形式

　　其中的 state: {} 是存放状态的，也就是数据。

　　reducers 是用来更新 state 的，但是他只能是同步的。所以我们需要 effects 来进行异步更新。

　　即：

 state: {
 collapsed: false,
 notices: [],
 }, // 存放状态和数据
   reducers: { // 用来同步设置state
     changeLayoutCollapsed(
       state = {
         notices: [],
         collapsed: true,
       },
       { payload },
     ) {
       return { ...state, collapsed: payload };
     },

     saveNotices(state, { payload }) {
       return {
         collapsed: false,
         ...state,
         notices: payload,
       };
     },
     // ...
  }

   effects: { // 异步更新state，通过调用同步的reducers实现
     *fetchNotices(_, { call, put, select }) {
       const data = yield call(queryNotices);
       yield put({
         type: 'saveNotices',
         payload: data,
       });
       const unreadCount = yield select(
         state => state.global.notices.filter(item => !item.read).length,
       );
       yield put({
         type: 'user/changeNotifyCount',
         payload: {
           totalCount: data.length,
           unreadCount,
         },
       });
     },
     // ...
  }