React修炼之Model篇详解
import * as usersService from '../services/users';
export default {
/*
* 当前 Model 的名称。整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
*/
namespace: 'users',
/*
* state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出
*
*/
state: {
list: [],
total: 0,
page: 0
},
reducers: {
/*
* reducers: Reducer 是 Action 处理器,用来处理同步操作,
* 可以看做是 state 的计算器。它的作用是根据 Action,从上一个 State 算出当前 State
*/
save(state, {payload: {data: list, total, page}}) {
return {...state, list, total, page}
},
search(state) {
return {...state}
}
},
/*
* effects:Action 处理器,处理异步动作,基于 Redux-saga 实现。
* Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。
*
* 异步函数不可以直接修改state状态,需要通过reducer函数来修改
*/
effects: {
/*
* 通过userServie 接口获取用户数据 ,并save进namespace=users的state中,
* state数据发生改变组件UserList调用render()重新加载。
*/
* fetch({payload: {page}}, {call, put}) {
const {data, headers} = yield call(usersService.fetch, {page});
yield put({
type: 'save',
payload: {
data,
total: headers['x-total-count'],
page: parseInt(page, 10)
}
});
},
},
subscriptions: {
setup({dispatch, history}) {
}
}
};
作者: NHZ-M
出处:https://www.cnblogs.com/nhz-M/p/10542907.html
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。