model中的结构
const Model = {
namespace: 'listAndcardList',
state: {
list: [],
},
effects: { // 异步操作
*fetch({ payload }, { call, put }) {
const response = yield call(queryFakeList, payload);
yield put({
type: 'queryList',
payload: Array.isArray(response) ? response : [],
});
},
},
reducers: { // 同步操作
queryList(state, payload) {
return { ...state, list: payload.data };
},
},
subscriptions: { // 监听路由
sendMessage({dispatch, history}) {
history.listen({pathname} => {
if (pathname === '/user') {
dispath({
type: 'queryList'
})
}
})
}
}
};
export default Model;
说明:
- namespace是唯一标识,多个model中的namespace不可以相同。
- reducers中写同步操作,effects中为异步操作。
- reducers说明:
- 参数1为原来的state,参数2为dispatch传的值。
- 返回值不可以直接为原来的state指针,可以通过JSON.parse(JSON.stringify(state))来进行赋值操作。
- 不可以存在异步操作。
- effects说明:
- 参数1为dispatch传的值。
- 参数2中put,就相当于dispatch,用于执行同步操作。
- 参数2中的call,用于执行异步操作(接口请求),返回值为接口返回的数据。
- 一般来说,先用call来执行异步操作,然后用put来调用reducers来改变state的值。
- 记住yield的使用。
网友评论