zoukankan      html  css  js  c++  java
  • 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}) {
    
          }
        }
    };
    nhz94259@163.com
  • 相关阅读:
    使用神经网络识别手写数字Using neural nets to recognize handwritten digits
    C++ 宏定义与常量
    C语言枚举类型(Enum)
    【转】DSP是什么--DSP是神马东东??
    linux 源码编译安装apache
    【转】细说自动化运维的前世今生
    【转】C语言中整型运算取Ceiling问题
    linux系统调优
    linux 状态与系统调优
    vue2.0 watch 详解
  • 原文地址:https://www.cnblogs.com/nhz-M/p/10542907.html
Copyright © 2011-2022 走看看