基础

动机

  • JavaScript 需要管理比任何时候都要多的 state (状态)
  • state 在什么时候,由于什么原因,如何变化已然不受控制
  • 我们总是将两个难以理清的概念混淆在一起:变化和异步

通过限制更新发生的时间和方式,Redux 试图让 state 的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。

核心概念

使用普通对象来描述应用的 state ,强制使用 action 来描述所有变化,为了把 action 和 state 串起来,开发一些函数,这就是 reducer。

三大原则

  • 单一数据源
  • State 是只读的
  • 使用纯函数来执行修改(reducer)

生态系统

与框架的绑定、中间件、增强器等


Action

  • Action 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。
  • Action 创建函数 就是生成 action 的方法

Reducer

  1. state 结构的设计
    开发复杂的应用时,不可避免会有一些数据相互引用。建议你尽可能地把 state 范式化,不存在嵌套。把所有数据放到一个对象里,每个数据以 ID 为主键,不同实体或列表间通过 ID 相互引用数据。把应用的 state 想像成数据库。这种方法在 normalizr 文档里有详细阐述。例如,实际开发中,在 state 里同时存放 todosById: { id -> todo }todos: array 是比较好的方式,
  2. 保持 reducer 纯净非常重要
    只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
  3. 拆分 Reducer
    每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同,分别对应它管理的那部分 state 数据

Store

getState() dispatch(action) subscribe(listener)

数据流

严格的单向数据流是 Redux 架构的设计核心。

  1. 调用 store.dispatch(action)
  2. Redux store 调用传入的 reducer 函数。
  3. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
  4. Redux store 保存了根 reducer 返回的完整 state 树。

搭配 React

Redux 的 React 绑定库是基于 容器组件和展示组件相分离 的开发思想。

你可能感兴趣的:(基础)