React-Redux 是一个非常流行的前端技术框架，尤其适用于处理大型、复杂的应用程序。在本文中，我们将简要介绍 React-Redux 的基础知识和应用，并提供一些示例代码，帮助读者更好地理解。
React-Redux 简介
React-Redux 是一个基于 React.js 库的状态管理库，它可以将 React.js 应用程序中的状态和操作分离出来，使得代码更加模块化和可维护。
React-Redux 的核心思想是把应用程序的状态存储在一个单一的存储库中，这个存储库叫做 “Store”。Store 内部的状态可以被应用程序中的任意组件访问和修改，这样就减轻了组件间通信的负担，简化了程序的设计和维护。
React-Redux 还包含了一些重要的概念，例如：
Action：用于描述事件的对象。Action 中包含了事件的类型和相关的数据，它们会被传递给 Store，以便 Store 能够更新内部状态。
Reducer：一个纯函数，用于根据 Action 更新 Store 中的状态。它接收两个参数：当前的状态和 Action 的数据。
Provider：一个 React 组件，用于将 Store 中的状态传递给 React 应用程序中的所有组件。
Connect：一个函数，用于将组件与 Store 中的状态和操作连接起来。它接收两个参数： mapStateToProps 和 mapDispatchToProps。
React-Redux 应用
现在，我们来看一个简单的 React-Redux 应用程序。假设我们有一个需要管理 TODO 列表的应用程序，我们希望这个应用程序能够允许用户添加新的任务，并且在任务完成后将其标记为已完成。
首先，我们需要创建一个 Store。在这个示例中，我们将创建一个包含两个任务的 TODO 列表。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
- --- -- ----- ---- ------ ---------- ----- --
- --- -- ----- ----- --- ----- ---------- ---- -
-
--
-------- ----------------- - ------------- ------- -
------ ------------- -
-- ------
---- -----------
------ -
------ -
---------------
-
--- --- -----------------
----- ---------------
---------- -----
-
-
--
-- --------
---- --------------
------ -
------ -------------------- -- -
-- -------- --- --------------- -
------ -
--------
---------- ---------------
--
- ---- -
------ -----
-
--
--
--------
------ ------
-
-
----- ----- - -------------------------在上面的代码中，我们使用 createStore 方法来创建 Store，并在 todoReducer 中处理 Action，以便 Store 可以根据 Action 更新内部状态。注意，我们还为 Store 提供了一个初始状态 initialState。
现在，我们将使用 Provider 组件将 Store 传递给 React 应用程序中的所有组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们将 Store 作为 store 属性传递给 Provider，并将 Provider 嵌套在 React 应用程序中的根组件中。这样，React 应用程序中的每个组件都可以通过 connect 函数连接到这个 Store 中。
接下来，我们将使用 Connect 函数来连接一个 React 组件到 Store。在这个示例中，我们将连接一个组件，用于显示 TODO 列表中的任务。它将使用 mapStateToProps 函数将 Store 中的状态映射到组件的属性中，以便组件可以读取 Store 中的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- --------------- -
------ -
----
--------------------- -- -
--- --------------
------
---------------
------------------------
------------ -- --------------------------
--
-----------
-----
---
-----
--
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
----------- -- -- ---------- ----- -------------- -------- -- --
--
-
------ ------- ------------------------ ------------------------------在上面的代码中，我们使用 mapStateToProps 函数将 Store 中的 todos 数组映射到 props 属性中，并使用 mapDispatchToProps 函数将 toggleTodo 函数映射到组件的 props 属性中，以便组件可以更新 Store 中的状态。
最后，我们将使用另外一个组件来添加新的任务到 Store 中。这个组件将使用 connect 函数来连接到 Store 中，并使用 mapDispatchToProps 函数将 addTodo 函数映射到组件的 props 属性中：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
-------- ------------------ -
----- --------- ----------- - -------------
-------- ------------------- -
-----------------------
-----------------------
---------------
-
------ -
----- ------------------------
------
-----------
---------------
--------------- -- -------------------------------
--
------- ----------------- -------------
-------
--
-
-------- ---------------------------- -
------ -
-------- ---- -- ---------- ----- ----------- -------- ---- --
--
-
------ ------- ------------- ---------------------------------在上面的代码中，我们使用 useState hook 来追踪用户输入，创建一个 handleSubmit 函数，在用户提交表单时添加新的任务，并将状态重置为空白。
现在，我们已经连接了 React 应用程序的三个组件到我们的 Store 中，可以开始运行我们的应用程序了。
结论
React-Redux 是一个非常流行和强大的前端技术框架，它可以帮助我们有效地管理和维护大型、复杂的应用程序。在本文中，我们已经学习了 React-Redux 的基础知识和应用，并提供了一些示例代码，希望能够帮助读者更好地掌握这项技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773e08a6d66e0f9aae88ee1