redux 原理介绍

Question

Redux 是一个 JavaScript 状态管理库，常用于 React 和其他 JavaScript 库或框架。它有助于在应用程序中管理和维护全局状态。Redux 基于 Flux 模式 和函数式编程的概念而设计。

Redux 的核心原理如下：

1. 单一数据源： Redux 强调应用程序状态应存储在一个单一的 JavaScript 对象中，称为 store。这有助于简化状态管理，容易跟踪状态变化，也便于调试。
2. 状态不可变： 应用程序状态在 Redux 中是不可变的，每次状态发生变化时，都会创建一个新的状态对象。不可变性使得状态变化更加可预测和容易跟踪。
3. 纯函数更新状态 (Reducer)： 为了修改状态，让整个程序保持一致，Redux 使用称为 Reducer 的纯函数来处理状态中的变更。Reducer 函数接收当前的状态和一个 action 对象作为输入，并返回一个新的状态。
4. Action： 我们需要通过发起 action 来描述状态发生了什么样的变化。在 Redux 中，action 是一个简单的 JavaScript 对象，其中包含一个 `type` 属性来描述此次操作的类型（如添加、删除等），以及其他所需的数据（payload）。
5. Store 提供的方法： Redux 提供了一个名为 createStore ​ 的方法来创建一个 store 。创建好的 store 提供了三个主要方法： getState() ​ 返回当前存储的状态； dispatch(action) ​ 更新状态; subscribe(listener) ​ 注册状态更新监听器。
6. Connect： 对于与 React 配合使用的场景，使用 `connect()` 函数来将 React 组件与 Redux Store 关联。它通过两个参数（mapStateToProps 和 mapDispatchToProps）接收 Store 中的状态和派发 action 的方法，并将它们以 props 形式传递给组件。

Redux 的工作流程可以概括为以下步骤：

1. 初始化 Store。
2. React 组件通过调用 action creator 创建一个 action 对象。
3. 应用程序通过调用 Store 的 `dispatch()` 方法，将 action 传递到 reducer。
4. Reducer 接收当前的状态和 action，根据 action 类型计算新的状态。
5. 新状态覆盖原始状态。
6. Store 触发一个 'CHANGE' 事件，通知所有监听器（如 React 组件）状态发生了变化。
7. 组件调用 getState() ​ 获取最新状态，并根据需要更新 UI。

通过遵循这些原则和工作流程，Redux 能帮助开发者在规模较大的应用程序中保持状态一致性和可维护性。