什么是 Redux？
Redux 是一个流行的 JavaScript 应用程序状态管理库，它帮助你在你的应用程序中管理数据流。与其他状态管理库相比，Redux 使用了一个单一的全局状态树，这使得数据流更加可预测，更容易调试和测试。Redux 可以用于所有 JavaScript 应用程序，但它在 React 应用程序中最为流行。
为什么要使用 Redux？
在一个大型的 React 应用程序中，组件之间的状态传递会变得非常棘手和难以维护。Redux 通过将数据流程集中到一个全局状态树中，可以减少组件之间的复杂数据传递，从而使代码更加易于理解和修改。
Redux 也提供了一些其他的好处。例如，它支持时间旅行调试，这使得调试复杂的状态变化变得轻松。Redux 还支持中间件，这使得扩展 Redux 功能变得非常容易。
Redux 基础
Redux 可以被理解为一个全局状态树，这个状态树可以通过 Redux 提供的 Action Creator 函数来改变。每一个 Action Creator 函数都会返回一个 Action 对象，这个对象描述了应用中的一个状态改变。
Action 对象是一个简单的 JavaScript 对象，它通常包含一个 type 属性，以及任何其他相关数据。
Redux 中的 state 可以通过 Reducer 函数来定义，这个函数会接收当前 state 和 Action 对象，然后返回一个新的 state。
上述概念比较抽象，下面我们通过一个简单的 Counter 应用程序来说明 Redux 是如何工作的。
------ ----- ---- -------
------ - ----------- - ---- -------
-- ------ -----
----- --------- - -----------
----- --------- - -----------
-- ------ --------
----- --------------- - -- -- -- ----- --------- --
----- --------------- - -- -- -- ----- --------- --
-- -------
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- ----------
------ ----- - -
---- ----------
------ ----- - -
--------
------ -----
-
-
-- -----
----- ----- - ---------------------------
----- ------- ------- --------------- -
------------------- -
------------------ -- -
------------------
--
-
-------- -
----- ----- - ----------------
------ -
-----
--------- -----------
------- ----------- -- -----------------------------------------------------
------- ----------- -- -----------------------------------------------------
------
-
-
-
------ ------- -------在上面的例子中，我们首先定义了两个 Action Types，一个 INCREMENT 和一个 DECREMENT。接下来，我们定义了一个 incrementAction 和一个 decrementAction Action Creator 函数，这些函数分别返回一个使用相应 Action Type 的 Action 对象。
我们也定义了一个 counterReducer 函数，用于计算新的 counter state。在这个案例中，它接受当前的 state 和一个与之相关的 Action 对象，并返回一个新的 state。
最后我们使用 createStore 函数来创建一个 Redux Store 并将 reducer 传给它。最后我们创建了一个 React 组件，该组件通过订阅 Store 监听器来更新组件的 state。
在 render 函数中，我们调用 store.getState() 来获取当前的状态。我们在两个按钮上注册了事件处理程序，并调用了 store.dispatch() 函数来发出一个 Action。在我们的应用程序中，这会调用 counterReducer，它将返回一个新的 state，我们在组件中更新该 state 以反映更改。
在 React 中使用 Redux
在实际项目中使用 Redux，我们需要创建一个 Redux Store，将 React 组件与 Redux Store 连接，并定义一个或多个 Reducer 函数。使用 React Redux library，我们可以更容易地将 Redux 与 React 集成在一起。
React Redux 提供了两种主要的组件，Provider 和 Connect。Provider 组件用于将 Redux Store 传递给 React 组件层次结构。Connect 组件用于将组件连接到全局 Redux Store 中。
下面我们来看一个简单的例子，该例子演示了如何创建一个 Counter 应用程序并在 React 中使用 Redux。
------ ----- ---- -------
------ -------- ---- -----------
------ - ----------- - ---- -------
------ - --------- ------- - ---- -------------
-- ------ -----
----- --------- - -----------
----- --------- - -----------
-- ------ --------
----- --------------- - -- -- -- ----- --------- --
----- --------------- - -- -- -- ----- --------- --
-- -------
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- ----------
------ ----- - -
---- ----------
------ ----- - -
--------
------ -----
-
-
-- -----
----- ----- - ---------------------------
-- ------- ---------
----- ------- ------- --------------- -
--------------- - -- -- -
--------------------------------------
-
--------------- - -- -- -
--------------------------------------
-
-------- -
----- ----- - ----------------
------ -
-----
--------- -----------
------- -------------------------------------------------
------- -------------------------------------------------
------
-
-
-
-- ------- --------- -- ----- -----
----- ---------------- - ------------- -- -- ------ ----- ------------
-- ------ -----------
----------------
--------- --------------
----------------- --
------------
-------------------------------
-在上面的例子中，我们首先定义了两个 Action Types 和两个 Action Creators 函数，然后定义了 counterReducer 函数。
接下来，我们创建了一个 Redux Store 并将 counterReducer 传递给 createStore 函数。
我们定义了一个 Counter 组件，它通过调用 props.dispatch() 方法来更改全局 Redux Store。
我们将 Counter 组件连接到 Redux Store 中，并使用 connect 函数将 count prop 映射到 Redux Store 中的计数器 state 值。
最后，我们使用 Provider 组件来将 Redux Store 注入 React 应用程序中，并呈现 ConnectedCounter 组件。
结论
Redux 是一个非常强大的 JavaScript 应用程序状态管理库，它可以帮助你管理 React 应用程序中的数据流。本文中我们介绍了 Redux 的基础知识及其在 React 中的使用方法，并提供了示例代码。我希望这篇文章可以帮助你更好地了解 Redux，并在你的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670ca8f05f551281025b5212