Redux是一种可预测状态容器，可以帮助前端开发人员在应用程序中创建一致的、可维护的状态管理。Redux提供了一个架构模式，用于管理React应用程序中的状态，并使其易于测试和维护。
Redux的工作原理
Redux使用三个基本原则使应用程序的状态更容易控制：
单一的状态树：Redux使用一个单一的状态树，这意味着整个应用程序的状态都包含在一个JavaScript对象中。这使得状态更易于管理，因为您只需要查看一个地方就可以看到整个应用程序的状态。
状态是只读的：应用程序的状态不能直接更改，必须通过分派操作来更改。这确保了状态的更改始终是可跟踪和可预测的。
使用纯函数来更新状态： Reducer是一个纯函数，接收旧状态和一个操作，返回新状态。这保证了状态更新是可预测的，不会有副作用，不会有异步操作。
Redux的组成部分
Redux由以下几个组成部分组成：
1. Store
Store 是应用程序状态的一个单一来源。Store 提供了一个 API 去读/写应用程序的状态，并且可以监听状态变化，以便接受对应用程序状态的变化做出响应。
2. Action
Action 是描述发生了什么的简单 JavaScript 对象。Action 负责携带操作的载荷（payload）。例如在 reducer 中创建一个增加计数器的操作的 Action。
{type: 'INCREMENT_COUNTER', payload: 1}3. Reducer
Reducer 是一个纯函数，为了更新应用程序状态而接收旧状态和 Action，并返回新状态。
-- -------------------- ---- -------
-------- --------------------- ------- -
------ ------------- -
---- --------------------
------ ---------- ------ ----------- - ----------------
---- --------------------
------ ---------- ------ ----------- - ----------------
--------
------ ------
-
-4. Dispatcher
Dispatcher 接收操作（Action）并分派给 Reducer 来更新状态。Dispatcher 可以看作是一个事件发射器。
在 React 中使用 Redux
Redux 可以通过一个专用的库 react-redux 轻松集成到 React 应用程序中。以下是将 Redux 与 React 集成的步骤：
安装 redux 和 react-redux
npm install --save redux react-redux
创建 Store 和 Reducer
我们将从创建一个简单的计数器应用程序开始，我们将用来演示 Redux 如何工作。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- --------------------
------ ---------- ------ ----------- - ----------------
---- --------------------
------ ---------- ------ ----------- - ----------------
--------
------ ------
-
-
----- ----- - ----------------------------在这个例子中，我们使用了 createStore 函数来创建一个 Store。 我们传递了 Reducer 函数作为唯一参数，并使用 initialState 参数为应用程序状态提供了一个默认值。 Reducer 接收指定 Action 并更新应用程序状态。
使用 Provider 向应用程序提供 Store
在 React 中使用 Redux，我们需要将应用程序中的 Store 传递给一个 Provider 组件。Provider 组件是 React Redux 库中的一个组件，负责将 Store 提供给应用程序的 React 组件。
-- -------------------- ---- -------
------ -------- ---- ------------
------ - -------- - ---- --------------
----------------
--------- --------------
---- --
------------
-------------------------------
--使用 connect 函数连接 React 组件
Connect 是 React Redux 库中的一个高阶函数，它负责将 Store 中的状态和更新函数映射到组件的 props 中。此函数使我们可以轻松访问 Store 中的状态和更新函数。以下是将 Counter 组件连接到 Redux Store 的示例代码：
-- -------------------- ---- -------
------ - ------- - ---- -------------
-------- -------------- -
------ -
-----
----------------------
------- ----------- -- ---------------------------------------
------- ----------- -- -----------------------------------------
------
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
----------------- ------- -- ---------- ----- -------------------- -------- ----- ---
----------------- ------- -- ---------- ----- -------------------- -------- ----- --
-
-
------ ------- ------------------------ -----------------------------在这个例子中，我们使用 connect() 函数，将 Counter 组件连接到 Store。 mapStateToProps 函数使用 Store 中的状态，将状态映射到组件的 props 上。mapDispatchToProps 映射更新函数到组件的 props 上。
使用 Store API 更新状态
通过调用 Store API 中的 dispatch 函数，我们可以在应用程序中触发 Action 并将其发送到 Reducer 中以更新状态。在下面的示例中，当用户单击添加或减少按钮时，会调用 incrementCounter 或 decrementCounter 方法，该方法会调用 dispatch 函数并将 Action 对象传递给它，以实现修改应用程序状态。
function mapDispatchToProps(dispatch) {
return {
incrementCounter: (value) => dispatch({ type: 'INCREMENT_COUNTER', payload: value }),
decrementCounter: (value) => dispatch({ type: 'DECREMENT_COUNTER', payload: value })
}
}结论
通过使用 Redux，我们可以更轻松地管理应用程序的状态，并使应用程序更易于维护和测试。使用 React Redux 库可以轻松将 Redux 集成到 React 应用程序中。
虽然Redux看起来有点冗长且需要在项目中添加许多额外代码，但这些代码所描绘的是如何使您的应用状态更加可预测和易于测试。只要您正确拆分应用程序的状态和准确地使用 reducers (纯函数)，您的代码库便很清晰，易于维护。
如果你还没有尝试使用 Redux，我鼓励你花点时间熟悉起来，毕竟 Redux 是 React 中使用最广泛的状态管理解决方案之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c3825208e8e1a085c2f42