Redux 是一个 JavaScript 应用程序状态管理工具，专门用于处理应用程序的状态，并且组件可以方便地从中获取状态和派发动作。在 React 中使用 Redux 能够让我们更可预测、更简单和更具维护性，这一点在大型应用程序中尤为重要。
状态管理
状态（state）是指应用程序的数据，包括 UI 的数据和应用程序的内部数据。在 React 应用程序中，状态有时被描述为组件的本地状态，因为它们只能被组件本身访问，通常也指任何在多个组件之间共享的数据。
在 React 中，我们可以将状态存储在组件本身中，并通过 props 将状态传递给子组件。这是很好的，但当应用程序变得更加复杂时，这种方法可能会变得非常混乱和难以理解。
Redux 通过引入“状态容器”的概念，旨在提高应用程序的可维护性和可扩展性。组件仍然可以在其中存储其本地状态，但它们对于应用程序状态的更新和访问现在会更加高效和明智。
Redux 状态容器
Redux 是一个状态容器，它由存储库、动作、操作和发生器组成。组件使用这些元素来获取和更新共享状态。
存储库（store）是应用程序状态的唯一来源，它存储整个应用程序的状态树，并提供访问和修改应用程序状态的方法。组件使用存储库中的状态来保证视图始终是最新的，并通过派发动作来消除异步或间接状态更改所带来的风险。
动作（action）是描述应用程序状态改变的纯 JavaScript 对象。在 Redux 中，动作是发送给存储库的唯一有效信息，可以由任何代码库生成，并指示存储库更改其状态。动作可以是同步或异步的，并且可以在应用程序中派生一系列其他动作。
操作（reducer）是要执行的函数，每当接受到新的动作时都会更新应用程序的存储库。操作编写在纯函数中，纯函数的参数是当前状态和应用程序中发生的动作。纯函数总是返回新的状态对象，而不是修改现有的。
发生器（selector）是将状态转换为所需格式的函数。发生器是以纯函数的形式编写的，它接收存储库中的状态，并返回可以由视图使用的格式。发生器被视图组件用于从存储库中选择所需的状态的部分，并将其传递给视图。
Redux 工作流程
Redux 工作流程如下：
- 组件触发动作。组件中的按钮、表单和其他 UI 元素触发的用户事件将创建动作。
- 动作被发送到操作。动作将被分派给对应操作，执行逻辑并返回新的状态。
- 存储库更新。返回的新状态将与旧状态合并，存储在存储库中，并更新应用程序的状态。
- 视图更新。作为新状态的一部分，UI 的视图被更新，并显示最新的应用程序状态。
构建 Redux 应用程序
下面是一些基本步骤，应用到一个典型的基于 React 的 Redux 应用程序中：
安装与配置
首先，您需要安装必要的软件包，包括 Redux 和 React-redux。React-redux 是一个用于将 Redux 绑定到 React 应用程序中的库。
- --- ------- ----- ----------- ------
接下来，需要创建一个存储库。在存储库中，需要定义一些初始状态和一些关键的操作：
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - -------------------------在上面的代码中，我们创建了一个初始状态为 { count: 0 } 的存储库，然后编写了两个操作：INCREMENT 和 DECREMENT，分别增加和减少计数器。
映射状态和操作
现在我们需要将状态映射到组件中。我们使用 React-redux 库来完成这个过程，这个库提供了一个 Provider 组件，它将存储库传递给根组件，并使其对子组件可用。
------ - -------- - ---- --------------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--现在，我们可以将存储库中的状态和操作映射到组件的 props 中。这可以通过编写函数 mapStateToProps 和 mapDispatchToProps 来实现。
------ - ------- - ---- --------------
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
----- ------- - -- ------ ---------- --------- -- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------- --------------------------------------
------
--
--
------ ------- ------------------------ -----------------------------在上面的代码中，mapStateToProps 函数映射存储库中的状态到组件的 props 中，mapDispatchToProps 函数将操作映射到组件的 props 中。
现在，我们的组件可以通过 props 访问存储库中的状态和操作，并相应地更新 UI。
发布与订阅
现在，我们的应用程序将能够像任何其他 Redux 应用程序一样工作。每当用户与我们的应用程序交互时，它都将触发动作，并将其发送给操作。操作将更改当前状态并将其更新到存储库中，最终更新 UI 视图。
结论
Redux 是一个优秀的给 React 应用程序添加状态管理的工具。通过将状态存储在存储库中，我们能够维护较大应用程序中的状态，并在应用程序层面上提高可维护性和可扩展性。请记住，每个动作都应该有对应的操作，每个操作都应该是一个纯 JavaScript 函数。
最后，重要的是要了解，Redux 并不是适合每个 React 应用程序的，具体情况具体分析。对于小型应用程序，使用本地状态和 props 可能已经足够了，但是如果您的应用程序越来越大，您可能需要考虑切换到 Redux。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ddf48eedcc8a97c86374a