最近，越来越多的前端开发者开始使用 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，以下是一个示例代码。
我们首先将创建一个 初始状态，它将包含我们应用程序的所有开始数据。
const initState = {
counter: 0
}然后，我们将创建两个 Action：
const incrementAction = {
type: 'INCREMENT'
}
const decrementAction = {
type: 'DECREMENT'
}这两个 Action 将分别增加和减少计数器。我们还需要创建一个 Reducer：
-- -------------------- ---- -------
----- ----------- - ------ - ---------- ------- -- -
------------------- -
---- ------------
------ - -------- ------------- - - -
---- ------------
------ - -------- ------------- - - -
--------
------ -----
-
-最后，我们将创建一个 Store，并将 Reducer 和初始状态作为参数传递给 createStore 方法。
import { createStore } from 'redux'
const store = createStore(rootReducer, initState)现在我们已经准备好在 React 组件中使用它。我们需要将 Provider 组件包装在应用程序根组件周围，并且将我们的 Store 传递给它。
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ --- ---- -------
------ - ----------- - ---- -------
------ ----------- ---- ------------------------
----- ----- - ------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
-最后，在你的组件中使用 connect 高阶组件来连接 Store。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- ------- ------- --------------- -
-------- -
------ -
-----
-------------------------------------
------- ------------------------------------------
------- ------------------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ -
-------- -------------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
-
-
------ ------- ------------------------ ----------------------------现在你已经准备好了，写一个 React 应用程序并使用 Redux 进行状态管理！
结论
Redux 其实很简单，只要你理清了它的思路，就可以更容易地构建可靠的应用程序。它为我们提供了一种清晰的方法来组织和管理应用程序状态，促进代码重用和可测试性。在你的下一个 React 项目中尝试使用 Redux，你会发现它可以让你的开发更加简单和高效！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c967dddd3a70eb6d8c52e