什么是 Redux？
Redux 是一种流行的 JavaScript 状态管理库。它允许您将数据存储在一个中央位置，以便您的应用程序的不同部分可以访问和更新该数据。Redux 与 React 一起广泛使用，并被认为是构建 React 应用程序的最佳做法。
Redux 的核心理念是使应用程序状态一致化和可预测化。通过在状态树中存储所有数据，Redux 可以在任何地方保证数据的唯一性。这使得您的应用程序易于测试和调试，并允许您更轻松地编写可维护的代码。
Redux 核心概念
Redux 有三个关键概念：
- Store：存储应用程序的所有状态数据。
- Action：描述对状态树的更新。
- Reducer：对状态树进行更新的函数。
Store
Store 是 Redux 中的核心概念。它是应用程序状态的单一源，并且是 JavaScript 对象。所有应用程序状态都存储在 Store 中，可以通过调用 getState() 方法来访问。
创建一个 Redux Store 的最简单方法是使用 createStore() 函数。它接受一个 Reducer 和一个可选的初始状态对象。以下是一个示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-------- -------------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - -------------- --
---- ------------
------ - ------ ----------- - -------------- --
--------
------ ------
-
-
----- ----- - ----------------------------Action
Action 是一个简单的描述状态更改的对象。它们应该是纯 JavaScript 对象，并具有 type 属性，用于描述要执行的操作。根据需要，它们可能包含其他属性，以提供有关更改的详细信息。
const incrementAction = { type: 'INCREMENT', payload: 1 };
const decrementAction = { type: 'DECREMENT', payload: 1 };Reducer
Reducer 是用于执行状态更改的函数。它接受两个参数：当前状态和将要执行的 Action 对象。Reducer 应该是纯函数：仅在给定相同输入时返回相同输出，并且不会修改其输入数据。
-- -------------------- ---- -------
-------- -------------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - -------------- --
---- ------------
------ - ------ ----------- - -------------- --
--------
------ ------
-
-Redux 工作流程
Redux 的工作流程如下：
- 应用程序代码派发一个 Action 到 Store。
- Store 调用 Reducer 函数，并将当前状态和 Action 对象传递给它。
- Reducer 函数根据 Action 对象，更新应用程序的状态树。
- Store 将更新后的状态存储在自己的内部，并通知所有注册的监听器（如 React 组件）有关此更改的更新事件。
Redux 应用程序的基本结构
Redux 应用程序通常由以下三个主要部分组成：
- Action：表示要执行的更改。
- Reducer：接受操作并更新应用程序状态。
- Store：将状态树存储在单一位置，并在状态更改时通知应用程序中的其他部分。
以下是一个简单的示例 Redux 应用程序：
-- -------------------- ---- -------
-- ----------
------ ----- --------- - --------- -- -- ----- ------------ ------- ---
------ ----- --------- - --------- -- -- ----- ------------ ------- ---
-- -----------
------ ----- -------------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - -------------- --
---- ------------
------ - ------ ----------- - -------------- --
--------
------ ------
-
--
-- --------
------ - ----------- - ---- --------
------ - -------------- - ---- -------------
----- ----- - ----------------------------
------ ------- ------在此示例中，我们定义了两个 Action：increment 和 decrement。这些操作都接受 payload 属性，该属性包含要更改的数量。然后，我们定义了一个名为 counterReducer 的 Reducer 函数，每当接收到一个 Action 时，它将根据 Action 中指定的数量调整应用程序的计数器值。
最后，我们创建了一个名为 store 的 Redux Store，并将其初始化为我们的 Reducer 函数。该 Store 现在实际上已经可以使用了。
在 React 中使用 Redux
在 React 中使用 Redux 的最佳方法是将 React 组件连接到 Redux Store 中。通过使用 react-redux 库中提供的 connect() 函数，您可以将 Store 中的状态映射到组件的 props 对象中，并将组件操作映射为 dispatch 函数，该函数将 Action 发送到 Redux Store 中。
以下是一个使用 Redux 和 react-redux 库的组件的简单示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------
----- ------- ------- --------- -
-------------------- - -- -- -
------------------------
--
-------------------- - -- -- -
------------------------
--
-------- -
----- - ----- - - -----------
------ -
-----
----------------
------- -----------------------------------------------
------- -----------------------------------------------
------
--
-
-
----- --------------- - ------- -- -- ------ ----------- ---
----- ------------------ - - ---------- --------- --
------ ------- ------------------------ -----------------------------在此示例中，我们定义了一个名为 Counter 的 React 组件，其中包含两个按钮，用于调用 increment() 和 decrement() 函数。我们使用了 mapStateToProps 函数来将 Store 中的 count 属性映射到组件的 props 对象中。我们还使用 mapDispatchToProps 来将操作映射到组件的 props 对象中，以便我们可以使用 this.props.increment() 和 this.props.decrement() 调用它们。
最后，我们将 Counter 组件连接到 Redux Store 中，并通过导出调用 connect() 函数来创建一个新的连接组件。
结论
Redux 是一个强大的 JavaScript 应用程序状态管理工具。虽然它需要花费一些时间来学习和理解，但它可以帮助您管理复杂的状态，使您的应用程序更加可维护和易于测试。我们希望这篇初学者指南对您有所帮助，并且您现在具有足够的知识来开始在自己的项目中使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675098e2050cf9039c143e96