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