Redux

Redux 是什么？

Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式 Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。

Redux 库和工具

Redux 是一个小型的独立 JS 库。 但是，它通常与其他几个包一起使用：

React-Redux

Redux 可以集成到任何的 UI 框架中，其中最常见的是 React 。React-Redux 是 Redux 官方维护的。

Redux Toolkit

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。

Redux DevTools 扩展

Redux DevTools 扩展 可以显示 Redux 存储中状态随时间变化的历史记录。这允许你有效地调试应用程序，包括使用强大的技术，如“时间旅行调试”。

单向数据流( one-way data flow )

基于 state 渲染 view，当发生某些 action（例如用户单击按钮）时，生成新的 state，基于新的 state 再重新渲染 view，这就是单向数据流。

然而，当我们有多个组件需要共享和使用相同 state时，可能会变得很复杂，尤其是当这些组件位于应用程序的不同部分时。

解决这个问题的一种方法是从组件中提取共享 state，并将其放入组件树之外的一个集中位置。这样，我们的组件树就变成了一个大“view”，任何组件都可以访问 state 或触发 action，无论它们在树中的哪个位置！

不可变性

“Mutable” 意为 “可改变的”，而 “immutable” 意为永不可改变。

JavaScript 的对象（object）和数组（array）默认都是 mutable 的。

如果想要不可变的方式来更新，代码必需先 复制 原来的 object/array，然后更新它的复制体。

展开运算符（spread operator）可以实现这个目的。

Redux 期望所有状态更新都是使用不可变的方式。

术语

action

action 是一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件.

action creator

action creator 是一个创建并返回一个 action 对象的函数。它的作用是让你不必每次都手动编写 action 对象：

const addTodo = text => {
 return {
  type: "todos/todoAdded",
  payload: text,
 }
}

reducer

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

reducer 必须符合一下规则：

• 仅使用 state 和 action 参数计算新的状态值
• 禁止直接修改 state。必须通过复制现有的 state 并对复制的值进行更改的方式来做 _不可变更新（immutable updates）_。
• 禁止任何异步逻辑、依赖随机值或导致其他“副作用”的代码

reducer 函数内部的逻辑通常遵循以下步骤：

• 检查 reducer 是否关心这个 action
  • 如果是，则复制 state，使用新值更新 state 副本，然后返回新 state
• 否则，返回原来的 state 不变

Redux 中 真正 重要的是 reducer 函数，以及其中计算新状态的逻辑。

store

当前 Redux 应用的状态存在于一个名为 store 的对象中。

store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前state。

dispatch

Redux store 有一个方法叫 dispatch。更新 state 的唯一方法是调用 store.dispatch() 并传入一个 action 对象。 store 将执行所有 reducer 函数并计算出更新后的 state，调用 getState() 可以获取新 state。

**dispatch 一个 action 可以形象的理解为 “触发一个事件”**。发生了一些事情，我们希望 store 知道这件事。 Reducer 就像事件监听器一样，当它们收到关注的 action 后，它就会更新 state 作为响应。

selector

随着应用变得越来越大，会遇到应用程序的不同部分需要读取相同的数据，selector 函数可以从 store 状态树中提取指定的片段。

redux 数据流

早些时候，我们谈到了“单向数据流”，它描述了更新应用程序的以下步骤序列：

• State 描述了应用程序在特定时间点的状况
• 基于 state 来渲染 UI
• 当发生某些事情时（例如用户单击按钮），state 会根据发生的事情进行更新
• 基于新的 state 重新渲染 UI

具体来说，对于 Redux，我们可以将这些步骤分解为更详细的内容：

• 初始启动：
  • 使用最顶层的 root reducer 函数创建 Redux store
  • store 调用一次 root reducer，并将返回值保存为它的初始 state
  • 当 UI 首次渲染时，UI 组件访问 Redux store 的当前 state，并使用该数据来决定要呈现的内容。同时监听 store 的更新，以便他们可以知道 state 是否已更改。
• 更新环节：
  • 应用程序中发生了某些事情，例如用户单击按钮
  • dispatch 一个 action 到 Redux store，例如 dispatch({type: 'counter/increment'})
  • store 用之前的 state 和当前的 action 再次运行 reducer 函数，并将返回值保存为新的 state
  • store 通知所有订阅过的 UI，通知它们 store 发生更新
  • 每个订阅过 store 数据的 UI 组件都会检查它们需要的 state 部分是否被更新。
  • 发现数据被更新的每个组件都强制使用新数据重新渲染，紧接着更新网页

动画的方式来表达数据流更新：

总结

• Redux 是一个管理全局应用状态的库
  • Redux 通常与 React-Redux 库一起使用，把 Redux 和 React 集成在一起
  • Redux Toolkit 是编写 Redux 逻辑的推荐方式
• Redux 使用 “单向数据流”
  • State 描述了应用程序在某个时间点的状态，UI 基于该状态渲染
  • 当应用程序中发生某些事情时：
    • UI dispatch 一个 action
    • store 调用 reducer，随后根据发生的事情来更新 state
    • store 通知 UI state 发生了变化
  • UI 基于新 state 重新渲染
• Redux 有这几种类型的代码
  • Action 是有 type 字段的纯对象，描述发生了什么
  • Reducer 是纯函数，基于先前的 state 和 action 来计算新的 state
  • 每当 dispatch 一个 action 后，store 就会调用 root reducer