前言
在现代 Web 应用程序开发中，组件化已经成为了一个主要趋势。随着应用程序功能的增加，组件之间的交互和状态管理也变得越来越复杂。Redux 是一个流行的状态管理库，它被广泛应用于 React 应用程序中。
在本文中，我们将介绍 Redux 的概念以及如何使用它来实现状态管理和组件之间的共享。我们还将通过一个实际的示例来说明 Redux 是如何工作的。本文既适用于已经熟悉 Redux 的开发人员，也适用于对 Redux 还不太熟悉的新手。
Redux 状态管理
Redux 是一个状态管理库，它提供了一种实现状态管理的方式，可以方便地在应用程序的组件之间共享数据。Redux 的核心概念很简单，它由三部分组成：store、reducer 和 action。
Store
Store 是 Redux 的核心，它是整个应用程序中保存数据的地方。Store 中存储的数据可以在整个应用程序中共享。我们可以通过调用 store.getState() 方法来获取当前 Store 中的状态。在 Redux 中只有一个 Store，这样可以确保所有组件共享的是同一个状态。
Reducer
Reducer 函数定义了应用程序如何根据当前状态和给定的 action 来更新 Store 中的状态。Reducer 函数有一个输入参数，即当前 Store 的状态，和一个输出参数，即新的 Store 状态。每次调用 Reducer 函数时，它都会基于当前状态和 action 创建一个新的 Store 状态。
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--在上面的示例中，我们定义了一个简单的 Reducer 函数。它接收当前 Store 状态和 action，如果 action 的 type 是 'INCREMENT'，则将 count 属性加 1，并返回一个新的状态。如果 type 是 'DECREMENT'，则将 count 属性减 1，如果 action 的 type 不是上述两个值，则返回当前状态。我们使用展开语法(...state)来创建新的状态对象。
Action
Action 是一个纯粹的 JavaScript 对象，它用于描述一个事件或状态的变化。一个 action 对象会包含一个 type 属性和其他一些属性。type 属性是必需的，它表示一个行动的类型，其他属性则取决于具体场景。
----- --------------- - - ----- ----------- -- ----- --------------- - - ----- ----------- --
在上述示例中，我们定义了两个简单的 action 对象。它们的 type 属性分别是 'INCREMENT' 和 'DECREMENT'。
状态管理示例
通过上述概念，我们可以开始使用 Redux 实现状态管理了。在下面的示例中，我们将创建一个简单的计数器应用程序，每当用户单击加号或减号时，计数器的值就会增加或减少。我们将使用 Redux 来存储和管理计数器的状态。
首先，我们需要安装 Redux 库。可以通过 npm 或 yarn 来完成。
--- ------- ----- ---- --- -----
在我们的应用程序中，我们需要创建一个 Store，一个 Reducer 和两个 action。代码如下所示：
------ - ----------- - ---- --------
-- ----
----- ------------ - - ------ - --
-- -------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
-- -- -----
----- ----- - ---------------------
-- -------
----- --------------- - - ----- ----------- --
----- --------------- - - ----- ----------- --在上述代码中，我们首先导入了 Redux 中的 createStore 函数。然后，我们定义了一个初始状态，一个 Reducer 和两个 action。
接下来，我们创建了一个 Store，通过传入 Reducer 函数来初始化它。
最后，我们定义了两个 action。这些 action 对象将被发送到 Reducer 中处理。它们的 type 属性分别是 'INCREMENT' 和 'DECREMENT'。
现在我们已经设置好了 Store 和 Reducer，接下来让我们来编写组件。
我们将创建两个组件：一个 Counter 组件和一个 Control 组件。Counter 组件将显示计数器的值，Control 组件将显示加号和减号按钮。当单击按钮时，它们将分别调用 dispatch 方法来发送 action。
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
----- ------- - -- -- -
----- ----- - ------------------- -- -------------
------ -----------------
--
----- ------- - -- -- -
----- -------- - --------------
------ -
--
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
---
--
--在上面的代码中，我们使用了 React-Redux 库的两个钩子函数：useSelector 和 useDispatch。
useSelector 函数用于从 Store 中获取状态，它接受一个选择器函数作为参数。选择器函数的输入参数是当前 Store 状态，输出参数是我们所关注的子状态。
Dispatch 函数用于发送 action。它接受一个 action 对象作为参数，并将其发送到 Reducer 中。在我们的示例中，我们使用了箭头函数将 action 对象作为 dispatch 函数的参数。当单击按钮时，这些函数将被调用。
现在我们可以在应用程序中使用这些组件了。
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
------ - -------- ------- - ---- ---------------
----- --- - -- -- -
------ -
--------- --------------
-------- --
-------- --
-----------
--
--
------ ------- ----在上述代码中，我们导入了 Counter 和 Control 组件。然后，我们使用 Provider 组件将 Store 传递给组件。现在，我们的状态管理和组件共享已经工作了。
Redux 中组件共享
Redux 的一个非常有用的特性是它可以轻松地在 React 应用程序中共享组件之间的数据。这是因为在 Redux 中，所有的 state 都被存储在一个 Store 中，而且所有的组件都可以访问这个 Store 中的 state。这意味着，我们完全可以将一个组件的 state 分享给其他组件，使它们之间能够实现相互交互。
下面，我们将通过一个实例来介绍如何使用 Redux 实现组件之间的数据共享。
我们将扩展刚才的示例，在一个组件中更新 Store 中的状态，在另一个组件中读取 Store 中的状态。
首先，我们需要修改我们的 Reducer 函数，以便将一个名为 isOrdering 的状态属性添加到 store 中。这样可以用来保存一个布尔值，表示是否需要显示表单。
----- ------------ - - ------ -- ----------- ----- --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
---- --------------------
------ - --------- ----------- ----------------- --
--------
------ ------
-
--接下来，我们创建两个新的组件，一个是 OrderForm 组件，用来显示表单，一个是 OpenFormButton 组件，用来显示一个按钮，当单击它时，它将 dispatch 一个 action，以便控制是否需要显示表单。
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
----- --------- - -- -- -
----- ---------- - ------------------- -- ------------------
------ -
---- -------- -------- ---------- - ------- - ------ ---
--------- ---------
-------------- --- -----------
------
--
--
----- -------------- - -- -- -
----- -------- - --------------
------ -
------- ----------- -- ---------- ----- ------------------- ----
----------- - ------ ----- - ----- ------
---------
--
--在上述实例中，我们使用了 useSelector 钩子函数来访问 Store 中的状态。我们还使用了 useDispatch 函数来发送 action。
现在，我们可以在我们的应用程序中使用这些组件了：
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
------ - -------- -------- ---------- -------------- - ---- ---------------
----- --- - -- -- -
------ -
--------- --------------
-------- --
-------- --
--------------- --
---------- --
-----------
--
--
------ ------- ----在上述示例中，我们将 OrderForm 和 OpenFormButton 组件添加到应用程序中。
现在，我们已经实现了组件之间的数据共享和交互。当单击 OpenFormButton 组件时，它将 dispatch TOGGLE_ORDER_FORM action，并将 Store 中的 isOrdering 值设置为相反的值。我们使用这个值来决定是否要显示 OrderForm 组件。
结论
在本文中，我们学习了如何使用 Redux 实现状态管理和组件共享，包括 Store、Reducer 和 Action 的概念。我们还通过一个示例，说明了如何在 React 应用程序中使用 Redux 实现组件之间的数据共享，并编写了一些组件。
Redux 在 Web 应用程序开发中是一种非常流行的状态管理库，它提供了一种简单、可靠的方式来管理状态和组件之间的共享。Redux 的概念简单易懂，但在实际操作中，你需要进行更深入的学习和实践。我们希望这篇文章能为您提供一些指导，使您能够更好地理解和应用 Redux。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67131175ad1e889fe20a3967