概述
Redux 是一种用于管理 React 应用状态的 JavaScript 库。通过将数据集中管理，Redux 使得 React 应用的状态管理更加易于处理，使应用更容易维护和开发。
但是，Redux 的学习曲线对于初学者来说可能比较陡峭。本文将会介绍如何在 React 组件中使用 Redux，希望能够帮助读者更好地理解 Redux，同时提供一个完整的例子来演示如何使用 Redux 来编写 React 组件。
Redux 状态管理
Redux 可以让应用程序的状态集中管理，将状态存储在一个“store”中。该 store 包含了应用状态的唯一来源，并且可以像 React 组件一样进行访问和更改应用状态。
Redux 的状态管理流程如下：
Redux 还提供了一套规范化的 API，用于强制实施“单向数据流”思想。在 Redux 的状态管理下，应用状态将始终保持可预测性和可维护性。
Redux 核心概念
在使用 Redux 时，我们需要理解其核心概念：
Store：整个应用的状态（state）存储在一个单一的对象中，称为 store。
Action：用于描述对 store 进行操作的对象。
Reducer：根据当前 state 和 action 返回新 state 的函数。
Provider：让 React 组件能够访问到 Redux store。
Redux in React
在 React 中使用 Redux 需要遵循以下步骤：
拆分应用状态，将不相关的状态移动到其他组件中，只保存关键和重要的应用状态。
在 Redux 中创建 store，将所有应用状态存储在 store 中。
创建 reducers，并根据应用的 state 和 action 返回新的 state。
使用 dispatch 在组件中触发 action，并触发 reducers，在 Redux 中更新应用状态。
使用 connect 方法在 React 组件中连接到 Redux store。connect 方法包装了组件，使其能够获取 store 中的状态，以及通过 dispatch 在 store 中更新状态。
使用 Redux 的示例应用
下面是一个示例应用，需要用到 Redux 的功能：
在文本框中输入一段文本，点击 Add 按钮后将这段文本添加到列表中。
在列表中，点击某个项目将其从列表中删除。
实现该应用的代码如下：
-- ------ -----
----- -------- - -----------
----- ----------- - --------------
-- -------
------ -------- ------------- -
------ -
----- ---------
-----
--
-
------ -------- ----------------- -
------ -
----- ------------
------
--
-
-- --------
----- ------------ - - ------ -- --
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------- -------------
--
---- ------------
------ -
---------
------ ---------------------- ---- -- --- --- --------------
--
--------
------ ------
-
-
-- -----
----- ----- - -------------------------
-- ---------
-------- ------- -------- ----------- ----- -- -
----- ------------ -------------- - -------------
------ -
-----
------
-----------
------------------
------------- -- ------------------------------
--
------- ----------- -- ---------------------------------
----
----------------- ---- -- -
--- --------- ----------- -- -----------------
------
-----
---
-----
------
--
-
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
--------
-----------
--
------ ------- ------------------------ ---------------------------在这个示例应用中，我们定义了三个 action：
ADD_ITEM：将item添加到应用状态的items数组中。REMOVE_ITEM：从应用状态的items数组中删除位于index的item。
我们还定义了一个 reducer，用于根据当前 state 和 action 返回新 state。在 reducer 中，我们将新增的 item 添加到 items 数组中，并在删除 item 时使用 Array.filter() 函数。
我们还定义了一个 React 组件 MyApp，它需要连接到 Redux store。在该组件中，我们使用了 useState hook 来保存输入框中的值，在按钮点击时触发 addItem() 函数，用于将输入框的值添加到 state 中。
结论
使用 Redux 管理 React 应用的状态可以使应用程序更加可维护和可扩展。在本文中，我们介绍了如何在 React 组件中使用 Redux，涵盖了 Redux 的核心概念以及示例应用。希望读者可以从本文中获取到有用的知识，加深对 Redux 的理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b42309babaf620faa61e7