在前端开发中，React 和 Redux 是目前最流行的技术框架之一。如果你想提高自己的前端开发技能，同时学习如何使用这两种强大的技术，那么本文将会是一个很好的起点。我们将会详细介绍如何使用 React 和 Redux 实现一个 TodoList 应用，并且提供示例代码和深入学习的指导意义。
TodoList 应用功能介绍
TodoList 应用是一个在日常生活和工作中非常有用的工具。它可以帮助你记录待完成的任务，并且让你更加高效地完成它们。在这个项目中，我们将会实现以下功能：
- 添加一个待完成的任务；
- 删除一个已经完成的任务；
- 标记一个任务为已经完成；
- 查看当前所有待完成和已完成的任务。
实现 TodoList 应用
在实现 TodoList 应用之前，我们需要先安装必要的依赖，包括 React、Redux、React-Redux 和 Redux-thunk。你可以使用以下命令进行安装：
--- ------- ----- --------- ----- ----------- -----------
创建 Redux Store
在实现 TodoList 应用之前，我们需要先创建一个 Redux store，它将会存储应用程序的全局状态。在本项目中，我们需要存储当前所有待完成和已完成的任务列表。
我们将会创建一个 store.js 文件，用于创建和导出 Redux store：
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------------------ ------------------------ ------ ------- ------
在上述代码中，我们使用 createStore 方法创建一个 Redux store，传入了一个来自 ./reducers.js 文件的 rootReducer 参数。我们还使用了 applyMiddleware 方法将 thunk 中间件应用到 store 中。
创建 Action
在 Redux 中，Action 是一个包含了数据的普通对象，它描述了发生了什么事件。在本项目中，我们创建了以下 Action：
添加一个待完成任务
------ ----- ------- - ------ -- --
----- -----------
-------- -
--- -----------
-----
---------- -----
-
---删除一个已完成任务
------ ----- ---------- - ---- -- --
----- --------------
-------- -
--
-
---标记一个任务为已完成
------ ----- ---------- - ---- -- --
----- --------------
-------- -
--
-
---创建 Reducer
在 Redux 中，Reducer是用来描述不同 action 如何更新 state 的纯函数。在我们的项目中，我们创建了一个 reducer 文件夹，并在其中创建了 index.js 文件，它导出了一个 rootReducer：
------ - --------------- - ---- -------- ------ ----------- ---- ---------------- ----- ----------- - ----------------- ------ ----------- --- ------ ------- ------------
在 todoReducer.js 文件中，我们定义了不同的 Action 如何改变 todos 状态：
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- ----------------
---- --------------
------ ----------------- -- ------- --- -------------------
---- --------------
------ -------------- -- -
-- -------- --- ------------------ -
------ - -------- ---------- --------------- --
-
------ -----
---
--------
------ ------
-
--
------ ------- ------------在上述代码中，我们使用 switch 语句处理不同的 action。当 ADD_TODO 被触发时，我们使用 [...state, action.payload] 方法更新 state。这将会使用 ES6 的展开运算符，来将一个新的待完成任务添加到当前的任务列表中。
当 DELETE_TODO 被触发时，我们使用 filter 方法来过滤掉指定的任务。
当 TOGGLE_TODO 被触发时，我们使用 map 方法来遍历当前的任务列表，查找到指定的任务，并将它的 completed 属性进行取反，以更新当前任务的完成状态。
创建 React 组件
现在，我们已经准备好了后端的所有逻辑，在本节中，我们将会创建 React 组件来展示 TodoList。
TodoInput 组件
我们将首先创建一个 TodoInput 组件，它将会用于添加待完成的任务。
在 src/components 文件夹中，创建 TodoInput.jsx 文件并声明以下代码：
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------
----- --------- - -- -------- -- -- -
----- ------ -------- - -------------
----- ------------ - --- -- -
-------------------
-- -------------- -
-------
-
------------------------
------------
--
------ -
----- ------------------------
------ ------------ ------------- -- ------------------------ --
------- ----------------- -------------
-------
--
--
------ ------- ---------------------在上述代码中，我们使用 useState 设置了本组件内部的 text 状态。然后我们使用 handleSubmit 方法处理 onSubmit 事件，向 reducer 中添加新的待完成任务。
我们还使用 connect 函数将 TodoInput 组件连接到 Redux store 中，以便我们可以将 addTodo Action 向 store 分发。
TodoList 组件
接下来，我们将会创建一个用于展示所有待完成和已完成任务的 TodoList 组件。
在 src/components 文件夹中，创建 TodoList.jsx 文件并声明以下代码：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------- ---------- - ---- -------------
----- -------- - -- ------ -------- -- -- -
----- ------------ - ---- -- -
-------------------------
--
----- ------------ - ---- -- -
-------------------------
--
------ -
----
--------------- -- -
---
-------------
-------- --------------- -------------- - -------------- - ------ --
-
----- ----------- -- -----------------------
-----------
-------
------- ----------- -- ---------------------------------
-----
---
-----
--
--
----- --------------- - ----- -- --
------ -----------
---
------ ------- -----------------------------------在上述代码中，我们使用 mapStateToProps 函数将 store 中的 todos 状态映射绑定到当前组件的 props 上。然后我们分别创建了 handleDelete 和 handleToggle 方法用于删除和标记任务为已完成。
TodoApp 组件
现在我们已经创建了两个组件，但是我们还需要将它们封装在一个更高层的容器组件中。在 src/components 文件夹中，创建一个 TodoApp.jsx 组件，内容如下：
------ ----- ---- --------
------ --------- ---- --------------
------ -------- ---- -------------
----- ------- - -- -- -
------ -
-----
---------- --
--------- --
------
--
--
------ ------- --------在上述代码中，我们导入了 TodoInput 和 TodoList 组件，并将它们渲染在 TodoApp 渲染函数内部。
将 TodoApp 组件渲染至 DOM
在创建了 TodoApp 组件之后，我们需要将它渲染到页面的 DOM 中。在 src 目录下创建一个 index.js 文件，并输入以下代码：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ------- ---- -----------------------
------ ----- ---- ----------
----------------
--------- --------------
-------- --
------------
-------------------------------
--在上述代码中，我们使用 ReactDOM.render 方法将 TodoApp 组件渲染到 DOM 中。我们还载入了 Redux store，将它作为 Provider 组件的参数，这样我们的所有组件都可以访问到 state 和 dispatch 方法。
总结
本文详细介绍了如何使用 React 和 Redux 来实现一个 TodoList 应用。我们从创建 store 和 action，到 reducer 和组件的创建，以及最后的渲染到 DOM，都进行了详细的讲解。希望通过本文的学习，你能够对 React 和 Redux 的应用有更深入的了解，并且能够应用到自己的项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c2671a83d39b488166870e