Redux 是一款流行的 JavaScript 应用状态管理器。它提供了一种可预测和可控的方式来管理应用程序的状态，特别是在处理大型和复杂的应用程序时特别有用。本文将深入探讨 Redux 的架构原理和最佳实践，并提供有用的示例代码。
什么是 Redux
Redux 是一个统一应用状态的容器，采用函数式编程思想，并遵循单向数据流的模式。这意味着 Redux 试图通过将应用的状态和操作隔离在一个中央存储器中来减少应用的复杂性，并使得应用在各种场景下保持一致。
Redux 的最初的应用场景是构建 React 应用，但实际上它可以使用在任何 JavaScript 应用上。同时，Redux 还提供了一些与 React 结合使用的扩展，如 react-redux 和 redux-thunk 等等。
在 Redux 中，应用状态通常被表示为一个单一的 JavaScript 对象。修改这个对象的唯一方法是通过执行纯函数的操作者，称为 reducer。这样，您可以像不可变数据一样修改状态，从而使跟踪应用程序的状态变得更加容易。
Redux 的核心概念
以下是一些 Redux 的核心概念，您需要了解并学习它们使用 Redux。
Store
Store 是 Redux 中最重要的核心概念之一。它是一个存储应用程序状态的容器，类似于管理您应用中所有组件的状态中心。Store 保存有关应用程序状态的所有信息，使得该信息能够在应用程序的任何位置都可以访问到。
Reducer
一个 reducer 是一个纯函数，用于根据先前的状态和一个操作来计算新状态。它接受当前状态和一个 action，然后返回新的状态。Redux 中只有 reducers 可以修改状态，所以是状态的所有变化都被分散在 reducers 的这些函数中。
Action
Action 是一个描述状态改变的普通 JavaScript 对象。它们必须包含一个 type 属性，以指示要被执行的操作类型，并且可能包含用于操作的任何数据。Action 是使 Redux 知道要对状态进行哪些更改的唯一方法。
Dispatch
dispatch 是一个用于将 action 发送到 store 的函数。因为在 Redux 中只有 reducers 可以修改状态，所以必须通过 dispatch 去调用 reducers 来更改应用的状态。
Middleware
Middleware 可以在 action 发送到 reducer 的过程中进行自定义操作。它是 Redux 提供的一种扩展 API，可以用于注册一些钩子和中间件函数。例如，可以使用中间件来实现异步操作、记录应用程序活动或从 action 中分离副作用。
Redux 工作流程
以下是 Redux 的工作方式：
- 一个 action（如用户点击按钮）会触发一个 dispatch 函数。
- Dispath 函数将 action 发送到由 reducers 组成的 store。
- Store 的 reducers 按照其在控制的状态进行更新，这将返回一个新的状态。
- 新的状态将自动发布给 store，这意味着所有订阅它的组件都会自动更新。
以下是 Redux 工作流程的示意图：
Redux 的最佳实践
下面是一些 Redux 的最佳实践：
1. 避免在 reducer 中产生副作用
就像在任何应用程序中一样，React 中不应该发生 HTTP 请求或其他副作用的逻辑应该在 Redux reducer 中避免。在所需的所有数据都存储在应用的状态中时，可以考虑使用 redux-saga 或 redux-observable 等库来处理它们。
2. 组织 Redux 目录结构
Redux 的目录结构应该与其状态树的结构具有一定的相似性。每个 reducer 应该有自己的文件，并且可以使用 index.js 导出所有相关函数。建议将 reducers 放在 reducers 文件夹中，actions 放在 actions 文件夹中，并使用 Ducks 架构。
3. 应该有一个主要的 reducer
应该有一个主要 reducer，用于组合所有其他 reducers。所有的 reducers 都会被传递给 combineReducers 函数，它将返回一个组合后的 reducer 函数，用于处理整个应用程序的状态。
4. 组合 reducers
在 Redux 中，一个 reducer 只能返回一个状态，因此代码中的一个 reducer 必须仅处理单个状态，并且不能直接处理另一个 reducer 的状态。组合 reducers 就是指将不同的 reducers 组合成一个大型的 reducer，方便管理大型应用的状态。
5. 记录 Store 的更新
在开发过程中，很有用的一点是将应用程序中的 STORE 更新记录下来。您可以使用 Redux 的一个中间件进行这项工作。例如，redux-logger 应该被安装在开发过程中。
示例代码
以下是一个实现 Redux 的 React 组件，它包含一个简单计数器示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------
----- ------- ------- --------------- -
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------------------------
------- -------------------------------------------------
------
--
-
-
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
----------
----------
--
------ ------- ------------------------ -----------------------------// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });-- -------------------- ---- -------
-- -----------
----- ------------ - -
------ --
--
------ ------- -------- -------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ --- ---- --------
------ -------- ---- -------------
----- ----- - ----------------------
----------------
--------- --------------
---- --
------------
--------------------------------
--这个组件使用了 connect High-Order component 来从 store 获取 count 和 increment、decrement 函数。它还过 map 需要的状态和操作到组件的 props，从而使其容易对组件进行渲染。在组件被渲染时，它会展示当前的计数，并显示两个按钮，每次点击会触发对应的操作。所有操作的处理都由 mapDispatchToProps 指定的 Redux action 和 reducer 来完成。
总结
在本文中，我们介绍了 Redux 工作原理的一些基本概念和最佳实践的建议。Redux 是一个功能强大且易于理解的应用程序状态管理器，可以帮助您开发更加可预测和可控的 React 应用程序。最佳实践的遵循，如组织 Redux 目录结构和分离处理副作用等操作时非常重要的，使您的应用程序更易于维护和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6532271d7d4982a6eb46aee0