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}) {

      }
    }
};