非常教程

Redux参考手册

方法 | Recipes

先决条件减速器概念( Prerequisite Reducer Concepts )

如 Reducers 中所述,Redux reducer 功能:

  • 应该有一个签名(previousState, action) => newState,类似于你要传递给的函数的类型Array.prototype.reduce(reducer, ?initialValue)
  • 应该是“纯粹的”,这意味着reducer:
    • 执行边缘作用(例如调用API或修改非本地对象或变量)。
    • 调用非纯函数(如Date.nowMath.random)。
    • 改变它的参数。如果 reducer 更新状态时,它不应该修改现有的就地状态对象。相反,它应该生成一个包含必要更改的对象。对于 reducer 更新状态中的任何子对象,都应使用相同的方法。

关于不变性,边缘作用和突变的注意事项不鼓励突变,因为它通常会中断时间行程调试和React Redux的connect功能:

  • 对于时间旅行,Redux DevTools 期望重放记录的动作会输出一个状态值,但不会改变其他任何东西。诸如变异或异步行为之类的副作用会导致时间旅行改变步骤之间的行为,从而破坏应用程序
  • 对于 React Redux,connect检查是否mapStateToProps已更改从函数返回的道具以确定组件是否需要更新。为了提高性能,connect需要一些依赖状态不可变的快捷方式,并使用浅层引用相等检查来检测更改。这意味着不会检测到通过直接变异对对象和数组所做的更改,并且组件不会重新呈现

其他副作用,例如在 reducer 中生成唯一ID或时间戳,也会使代码难以预测并且难以调试和测试。

由于这些规则,在转向组织 Redux reducer 的其他特定技术之前,必须充分理解以下核心概念:

Redux Reducer基础

重要概念

  • 从状态和状态形状的角度思考
  • 由状态委托更新责任(减速器组成
  • 更高阶的减速器
  • 定义减速器的初始状态

阅读清单

  • Redux Docs: Reducers
  • Redux Docs: Reducing Boilerplate
  • Redux Docs: Implementing Undo History
  • Redux Docs: combineReducers
  • The Power of Higher-Order Reducers
  • Stack Overflow: Store initial state and combineReducers
  • Stack Overflow: State key names and combineReducers

纯粹的功能和副作用

重要概念

  • 副作用
  • 纯粹的功能
  • 如何结合功能来思考

阅读清单

  • The Little Idea of Functional Programming
  • Understanding Programmatic Side-Effects
  • Learning Functional Programming in Javascript
  • An Introduction to Reasonably Pure Functional Programming

不可变的数据管理

重要概念

  • 易变性与不变性
  • 不间断地更新对象和数组
  • 避免使状态发生变化的函数和语句

阅读清单

  • Pros and Cons of Using Immutability With React
  • Javascript and Immutability
  • Immutable Data using ES6 and Beyond
  • Immutable Data from Scratch
  • Redux Docs: Using the Object Spread Operator

规范化数据

重要概念

  • 数据库结构和组织
  • 将关系/嵌套数据拆分成单独的表格
  • 为给定项目存储单个定义
  • 通过ID引用项目
  • 使用按物品ID键入的对象作为查找表,以及用于跟踪排序的ID数组
  • 关联关系中的项目

阅读清单

  • Database Normalization in Simple English
  • Idiomatic Redux: Normalizing the State Shape
  • Normalizr Documentation
  • Redux Without Profanity: Normalizr
  • Querying a Redux Store
  • Wikipedia: Associative Entity
  • Database Design: Many-to-Many
  • Avoiding Accidental Complexity When Structuring Your App State
Redux

Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快,Redux因其简单易学体积小在短时间内成为最热门的前端架构。

主页 http://redux.js.org/
源码 https://github.com/reactjs/redux/
发布版本 3.7.2

Redux目录

1.高级 | Advanced
2.API
3.基础 | Basics
4.FAQ
5.介绍 | Introduction
6.其他 | Miscellaneous
7.方法 | Recipes