前言
Redux 是一个流行的 JavaScript 应用程序状态管理工具。它被广泛应用于各种 Web 应用程序和框架中，包括 React、Angular 和 Vue 等。Redux 的核心理念是单一状态树，它可以帮助开发人员更好地管理应用程序的状态，并提高应用程序的可维护性和可测试性。在本文中，我们将使用 Redux 构建一个简单的 TodoList 应用程序，以帮助读者更好地理解 Redux 的核心概念和用法。
Redux 核心概念
在开始构建 TodoList 应用程序之前，我们需要先了解 Redux 的核心概念。Redux 的核心概念包括：store、action 和 reducer。下面是它们的简要介绍：
Store：Redux 应用程序的状态存储在一个称为 store 的对象中。它包含应用程序的全部状态，是应用程序的唯一数据源。
Action：Action 是一个描述应用程序发生了什么的普通对象。它包含一个 type 字段，用于指定要执行的操作类型，以及一个可选的 payload 字段，用于传递数据。
Reducer：Reducer 是一个纯函数，它接收当前状态和一个 action，然后返回一个新的状态。Reducer 的作用是将旧状态和 action 转换为新状态。
构建 TodoList 应用程序
接下来，我们将使用 Redux 构建一个简单的 TodoList 应用程序。TodoList 应用程序包含以下功能：
- 添加任务
- 删除任务
- 标记任务为已完成
- 显示未完成任务数量
安装 Redux
首先，我们需要安装 Redux 和 React-Redux。可以使用 npm 或 yarn 进行安装：
npm install redux react-redux
yarn add redux react-redux
创建 Redux Store
在创建 Redux Store 之前，我们需要定义应用程序的状态结构。在本例中，我们将使用一个数组来存储任务列表。每个任务都是一个对象，包含 id、text 和 completed 三个字段。
const initialState = {
todos: []
};接下来，我们将创建一个 reducer 函数来处理 action。在本例中，我们将使用 switch 语句来处理不同的 action 类型。
-- -------------------- ---- -------
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ -
---------------
-
--- ----------
----- ------------
---------- -----
-
-
--
---- --------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
--
---- --------------
------ -
---------
------ ----------------------- -- ------- --- ----------
--
--------
------ ------
-
-在 reducer 函数中，我们使用展开运算符来创建一个新的状态对象。在 ADD_TODO action 中，我们将新任务添加到任务列表中。在 TOGGLE_TODO action 中，我们将完成状态切换为相反的值。在 REMOVE_TODO action 中，我们从任务列表中删除任务。如果 action 类型不匹配，则返回当前状态。
现在，我们可以使用 createStore 函数来创建 Redux Store。我们需要将 reducer 函数作为参数传递给 createStore 函数。
import { createStore } from 'redux';
const store = createStore(todoReducer);创建 React 组件
接下来，我们将创建一个 React 组件来显示 TodoList 应用程序。我们需要使用 react-redux 库中的 connect 函数来将组件连接到 Redux Store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- ---------- ------ -------- ----------- ---------- -- -
----- ------ -------- - -------------------
-------- --------------- -
-- ------------- -
---------
--- -----------
----
---
------------
-
-
------ -
-----
-----------------
------ ----------- ------------ ----------- -- ------------------------ --
------- --------------------------- -------------
----
--------------- -- -
--- --------------
------
---------------
------------------------
------------ -- --------------------
--
-----------
------- ----------- -- ------------------------------------
-----
---
-----
--------------- ------------------ -- ----------------------------
------
--
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
-------- ---- -- ---------- ----- ----------- ------- ---
----------- -- -- ---------- ----- -------------- -- ---
----------- -- -- ---------- ----- -------------- -- --
---
------ ------- ------------------------ ------------------------------在上面的代码中，我们定义了一个 TodoList 组件。它接收 todos、addTodo、toggleTodo 和 removeTodo 四个属性。todos 属性代表任务列表，addTodo、toggleTodo 和 removeTodo 分别代表添加、切换和删除任务的回调函数。
我们使用 React 自带的 useState 钩子来定义一个 text 状态，用于存储用户输入的任务文本。handleAddTodo 函数用于在用户单击添加按钮时添加新任务。如果文本框不为空，则调用 addTodo 回调函数将新任务添加到任务列表中，并将文本框重置为空。
在渲染函数中，我们使用 map 函数遍历任务列表，并在每个任务上渲染一个复选框、任务文本和一个删除按钮。通过调用 toggleTodo 和 removeTodo 回调函数，可以切换任务状态和删除任务。最后，我们在底部显示未完成任务数量。
我们还定义了两个函数 mapStateToProps 和 mapDispatchToProps，它们将组件连接到 Redux Store。mapStateToProps 函数将 todos 属性映射到 Redux Store 中的 todos 状态。mapDispatchToProps 函数将 addTodo、toggleTodo 和 removeTodo 回调函数映射到 Redux Store 中的 dispatch 函数。
渲染应用程序
现在，我们可以将 TodoList 组件渲染到页面上了。我们需要在根组件中使用 Provider 组件来将 Redux Store 传递给子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ -------- ---- -------------
------ ----- ---- ----------
-------- ----- -
------ -
--------- --------------
--------- --
-----------
--
-
------ ------- ----在上面的代码中，我们导入 TodoList 组件和 store 对象，并使用 Provider 组件将 store 对象传递给 TodoList 组件。
结论
在本文中，我们使用 Redux 构建了一个简单的 TodoList 应用程序。我们介绍了 Redux 的核心概念，并演示了如何使用 Redux 和 React-Redux 库来管理应用程序状态。Redux 可以帮助开发人员更好地管理应用程序的状态，并提高应用程序的可维护性和可测试性。希望本文对读者有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675c64d0e5138b922282e146