关于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,
        },
      });
    },
    // ...
 }