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方法。

  • 相关阅读:
    7月15日考试 题解(链表+状压DP+思维题)
    暑假集训日记
    C# .NET 使用 NPOI 生成 .xlsx 格式 Excel
    JavaSE 基础 第42节 局部内部类
    JavaSE 基础 第41节 匿名内部类
    JavaSE 基础 第40节 内部类概述
    JavaSE 基础 第39节 接口的应用
    JavaSE 基础 第38节 接口的实现
    JavaSE 基础 第37节 接口概述
    JavaSE 基础 第36节 抽象类概述与使用
  • 原文地址:https://www.cnblogs.com/DM428/p/8126056.html
Copyright © 2011-2022 走看看