zoukankan      html  css  js  c++  java
  • 使用combineReducers注意事项

    一、从‘redux’包中引入combineReducers方法:

    import { combineReducers } from 'redux';
    

      

    二、针对state的不同属性写不同的reducer,每一个reducer专门负责修改state的某一个属性。

      写出来所有的reducer函数,这些函数的第一个参数是对应的state属性,第二个参数是action。函数最后返回的结果也是state的属性,而不是整个state。

      

    //state structure
    // const state = {
    //     items:[],
    //     value
    // };
    
    const items = (items=[], action) => {
        switch(action.type){
            case 'addItem':return addItem(items, action);break;
            case 'removeItem':return removeItem(items, action);break;
            case 'toggleItem':return toggleItem(items, action);break;
            default :return items;
        }
    };
    
    //上方的items方法就是专门用于处理state.items数组的reducer。
    //这里最好reducer的名称与state的对应属性同名。 //注意items方法接受的第一个参数就是items,后面的赋值是ES6的默认赋值语法。可用于给state设置默认值

      

    三、将这些reducer放入一个对象,最后作为参数传递给combineReducers方法。

    const reducer = combineReducers({items, value});
    export default reducer;
    
    //注意如果reducer方法的名字与其对应state属性的名字不一样,则不能使用ES6对象字面量语法,需要用冒号说明对应方法。
    //最后导出这个reducer,即可在store.js中引入作为参数传递给createStore方法,创建store。

      

    主要的注意点就是各个reducer方法的第一个参数以及返回结果不再是整个state,而是state的对应属性。

    另外好需要注意一下JavaScript的变量提升,如果使用赋值语法声明reducer函数,那么必须在声明所有reducer之后使用combineReducers方法,否则因为赋值语法声明的函数不会提升导致combineReducers方法接收到的对象的所有属性均为undefined。

    如果使用function声明函数,那么可以任意位置使用combineReducers方法。

  • 相关阅读:
    HTTPS之acme.sh申请证书
    GoAccess日志分析工具
    KVM之CPU虚拟化
    自动化运维之PSSH
    Hadoop+HBase 集群搭建
    SSH + Google Authenticator 安全加固
    查看数据的类型(python)
    在word中,替换多个词语。正则表达式中 [] {} 是可以连用的(python)
    方差分析的前提,与检验,以及球形检验
    清屏处理(汇编)
  • 原文地址:https://www.cnblogs.com/DM428/p/8126056.html
Copyright © 2011-2022 走看看