• 使用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方法。

  • 相关阅读:
    错误记录 git pull
    关于file_operations结构体
    20180911-Java实例01
    20180910-Java 文档注释
    20180907-Java Applet基础
    Elastic Stack生态圈
    关于我和本博客
    雨后的春日清晨
    charles 安装https证书
    css3不同文字大小底部对齐的完美解决方案
  • 原文地址:https://www.cnblogs.com/DM428/p/8126056.html
Copyright © 2020-2023  润新知