最近，越来越多的前端开发者开始使用 Redux。Redux 是一个功能强大，但思路相对抽象的 JavaScript 应用状态管理库。它可以让我们构建可靠且易于测试的应用程序。
有很多人感到困惑，因为 Redux 的思维模式比较复杂。它需要你在应用程序中引入许多概念，如 Action，Reducers，Store，甚至中间件。但是，它实际上是很简单的，只要你理清它的思想模式。
Redux 的基本思想
Redux 将应用程序状态存储在一个单一的可变对象中，这个对象被称为 Store。所有的组件都从这个 Store 中读取数据，每个组件都可以向 Store 发送指令来更新应用程序状态。这些指令被称为 Action。
使用 Reducers 因此成为不可避免。Reducer 将 Action 作为输入，并返回一个新的应用程序状态。通过组合多个 Reducer 可以构建一个 Root Reducer。
最后，我们需要通过 Provider 将这个 Store 传递给 React 组件树。
这听起来复杂，但实际上只是一个简单的流程。
Redux 的优点
Redux 的优点在于它提供了一种非常清晰的方法来组织应用程序的状态，让我们非常容易地跟踪应用程序的变化。
Redux 还能够让我们构建可重用的组件，数据通过 Store 传递，可以在不同的组件之间共享，并且非常容易测试。
此外，Redux 提供了一种中心化的数据流来管理状态，并使开发人员能够有效地控制应用程序中复杂性的增长。
示例代码
为了帮助你更好地理解 Redux，以下是一个示例代码。
我们首先将创建一个 初始状态，它将包含我们应用程序的所有开始数据。
----- --------- - - -------- - -
然后，我们将创建两个 Action：
----- --------------- - - ----- ----------- - ----- --------------- - - ----- ----------- -
这两个 Action 将分别增加和减少计数器。我们还需要创建一个 Reducer：
----- ----------- - ------ - ---------- ------- -- -
------------------- -
---- ------------
------ - -------- ------------- - - -
---- ------------
------ - -------- ------------- - - -
--------
------ -----
-
-最后，我们将创建一个 Store，并将 Reducer 和初始状态作为参数传递给 createStore 方法。
------ - ----------- - ---- ------- ----- ----- - ------------------------ ----------
现在我们已经准备好在 React 组件中使用它。我们需要将 Provider 组件包装在应用程序根组件周围，并且将我们的 Store 传递给它。
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ --- ---- -------
------ - ----------- - ---- -------
------ ----------- ---- ------------------------
----- ----- - ------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
-最后，在你的组件中使用 connect 高阶组件来连接 Store。
------ ----- ---- -------
------ - ------- - ---- -------------
----- ------- ------- --------------- -
-------- -
------ -
-----
-------------------------------------
------- ------------------------------------------
------- ------------------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ -
-------- -------------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
-
-
------ ------- ------------------------ ----------------------------现在你已经准备好了，写一个 React 应用程序并使用 Redux 进行状态管理！
结论
Redux 其实很简单，只要你理清了它的思路，就可以更容易地构建可靠的应用程序。它为我们提供了一种清晰的方法来组织和管理应用程序状态，促进代码重用和可测试性。在你的下一个 React 项目中尝试使用 Redux，你会发现它可以让你的开发更加简单和高效！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672c967dddd3a70eb6d8c52e