zoukankan      html  css  js  c++  java
  • Redux学习笔记------reducer

    reducer要做的事就是怎样更新状态

    reducer是一个纯函数,接收旧的state和acion返回新的state

    reducer的禁止:

    • 修改传入参数;
    • 执行有副作用的操作,如 API 请求和路由跳转;
    • 调用非纯函数,如 Date.now() 或 Math.random()。
    • const initialState = {
        visibilityFilter: VisibilityFilters.SHOW_ALL,
        todos: []
      };
      function todoApp(state = initialState, action) {
        switch (action.type) {
          case SET_VISIBILITY_FILTER:
            return Object.assign({}, state, {
              visibilityFilter: action.filter
            })
          default:
            return state
        }
      }

      不要修改 state 使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state{visibilityFilter: action.filter }),因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。在 default 情况下返回旧的 state遇到未知的 action 时,一定要返回旧的 state

     combineReducers():

    两种等价的方法

    import { combineReducers } from 'redux';
    
    const todoApp = combineReducers({
      visibilityFilter,
      todos
    })
    
    export default todoApp;
    export default function todoApp(state = {}, action) {
      return {
        visibilityFilter: visibilityFilter(state.visibilityFilter, action),
        todos: todos(state.todos, action)
      }
    }

    或者添加KEY两种等价的方法(key是用来筛选出state中的你所需要的数据进行处理)

    const reducer = combineReducers({
      a: doSomethingWithA,
      b: processB,
      c: c
    })
    function reducer(state = {}, action) {
      return {
        a: doSomethingWithA(state.a, action),
        b: processB(state.b, action),
        c: c(state.c, action)
      }
    }
  • 相关阅读:
    node03- FS内置模块
    node03- CommonJS
    删除当前目录下的所有文件夹和文件
    解决 idea 项目中Error:java: 无效的标记
    Raid0,Raid1,Raid5,Raid10 总结
    Tcpdump命令
    ClassNotFoundException 和 NoClassDefFoundError 区别
    Dart-List里面常用的属性和方法
    CSS实现等分布局的4种方式
    iOS项目添加CocoaPods
  • 原文地址:https://www.cnblogs.com/pengshuo/p/6640541.html
Copyright © 2011-2022 走看看