• 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)
      }
    }
  • 相关阅读:
    基于jQuery的鼠标悬停时放大图片的效果制作
    让document.write的广告无阻塞的加载
    浅谈DOM事件的优化
    前端自动化构建和发布系统的设计
    parseQueryString
    元素缩放
    apply用法
    3D旋转
    CSS居中的多种方法
    System Center Configuration Manager 2016 域准备篇(Part2)
  • 原文地址:https://www.cnblogs.com/pengshuo/p/6640541.html
Copyright © 2020-2023  润新知