前言
React 是一个非常流行的前端框架，它提供了一种声明式的方式来构建用户界面。Redux 是一个状态管理库，它可以让我们更好地管理应用程序的状态。在这篇文章中，我们将通过一个实例来学习如何使用 React 和 Redux 实现一个 TodoList 应用程序。这个应用程序将包括以下功能：
- 添加任务
- 删除任务
- 标记任务为已完成
- 显示所有任务
- 显示未完成任务
- 显示已完成任务
准备工作
在开始之前，我们需要安装一些必要的工具和库。首先，我们需要安装 Node.js 和 npm。Node.js 是一个 JavaScript 运行时环境，而 npm 是 Node.js 的包管理器。
安装完成之后，我们可以使用以下命令来创建一个新的 React 应用程序：
npx create-react-app todo-list cd todo-list npm start
这将创建一个名为 todo-list 的新应用程序，并启动开发服务器。我们可以在浏览器中访问 http://localhost:3000 来查看应用程序。
创建 TodoList 组件
接下来，我们需要创建一个 TodoList 组件。这个组件将是我们应用程序的主要组成部分。在 src 目录下创建一个新的文件 TodoList.js，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- -------- - -- -- - ------ - ----- ----------------- ------ -- -- ------ ------- ---------展开代码
这个组件只是简单地渲染了一个标题。现在，我们可以将这个组件添加到我们的应用程序中。在 src/App.js 文件中，将以下代码添加到文件的顶部：
import TodoList from './TodoList';
然后，将以下代码添加到 App 组件的 render 方法中：
<div className="App"> <TodoList /> </div>
现在，我们可以在浏览器中查看应用程序，应该可以看到一个包含标题的页面。
添加任务
接下来，我们将添加一个表单来向 TodoList 中添加任务。在 TodoList.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ----- -------- - -- -- - ----- ------ -------- - ------------- ----- ------- --------- - ------------- ----- ----------------- - ------- -- - ---------------------------- -- ----- ------------ - ------- -- - ----------------------- ------------------- ------- ------------ -- ------ - ----- ----------------- ----- ------------------------ ------ ----------- ------------ ---------------------------- -- ------- ----------------- ------------- ------- ------ -- -- ------ ------- ---------展开代码
这个代码添加了一个表单和两个状态：task 和 tasks。task 用于存储当前输入的任务，tasks 用于存储所有任务。handleInputChange 函数用于更新 task 状态，handleSubmit 函数用于添加任务到 tasks 列表中。
现在，我们可以在浏览器中查看应用程序，并尝试添加一些任务。我们应该可以看到任务被添加到列表中。
删除任务
接下来，我们将添加一个删除按钮来删除任务。在 TodoList.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ----- -------- - -- -- - ----- ------ -------- - ------------- ----- ------- --------- - ------------- ----- ----------------- - ------- -- - ---------------------------- -- ----- ------------ - ------- -- - ----------------------- ------------------- ------- ------------ -- ----- ------------ - ------- -- - ----- -------- - ----------- ---------------------- --- ------------------- -- ------ - ----- ----------------- ----- ------------------------ ------ ----------- ------------ ---------------------------- -- ------- ----------------- ------------- ------- ---- ----------------- ------ -- - --- ------------ ------ ------- ----------- -- ------------------------------------ ----- --- ----- ------ -- -- ------ ------- ---------展开代码
这个代码添加了一个 handleDelete 函数，用于从 tasks 列表中删除任务。我们还添加了一个删除按钮，它将调用 handleDelete 函数并传递任务的索引作为参数。
现在，我们可以在浏览器中查看应用程序，并尝试删除一些任务。我们应该可以看到任务被成功删除。
标记任务为已完成
接下来，我们将添加一个复选框来标记任务为已完成。在 TodoList.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ----- -------- - -- -- - ----- ------ -------- - ------------- ----- ------- --------- - ------------- ----- ----------------- - ------- -- - ---------------------------- -- ----- ------------ - ------- -- - ----------------------- ------------------- - ------ ----- ---------- ----- ---- ------------ -- ----- ------------ - ------- -- - ----- -------- - ----------- ---------------------- --- ------------------- -- ----- ------------ - ------- -- - ----- -------- - ----------- ------------------------- - --------------------------- ------------------- -- ------ - ----- ----------------- ----- ------------------------ ------ ----------- ------------ ---------------------------- -- ------- ----------------- ------------- ------- ---- ----------------- ------ -- - --- ------------ ------ --------------- ------------------------ ------------ -- -------------------- -- ------------ ------- ----------- -- ------------------------------------ ----- --- ----- ------ -- -- ------ ------- ---------展开代码
这个代码添加了一个 completed 属性来存储任务是否已完成。我们还添加了一个复选框来标记任务为已完成，并更新 handleToggle 函数来切换任务的 completed 属性。
现在，我们可以在浏览器中查看应用程序，并尝试标记一些任务为已完成。我们应该可以看到任务被成功标记。
显示所有任务
接下来，我们将添加一个按钮来显示所有任务。在 TodoList.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ----- -------- - -- -- - ----- ------ -------- - ------------- ----- ------- --------- - ------------- ----- -------- ---------- - ---------------- ----- ----------------- - ------- -- - ---------------------------- -- ----- ------------ - ------- -- - ----------------------- ------------------- - ------ ----- ---------- ----- ---- ------------ -- ----- ------------ - ------- -- - ----- -------- - ----------- ---------------------- --- ------------------- -- ----- ------------ - ------- -- - ----- -------- - ----------- ------------------------- - --------------------------- ------------------- -- ----- ------------ - ------- -- - ------------------------------ -- ----- ------------- - ------------------- -- - -- ------- --- ------ - ------ ----- - ---- -- ------- --- ------------ - ------ --------------- - ---- - ------ ---------------- - --- ------ - ----- ----------------- ----- ------------------------ ------ ----------- ------------ ---------------------------- -- ------- ----------------- ------------- ------- ----- ------- ----------- ----------------------- --- --------- ------- -------------- ----------------------- ------ --------- ------- ----------------- ----------------------- --------- --------- ------ ---- ------------------------- ------ -- - --- ------------ ------ --------------- ------------------------ ------------ -- -------------------- -- ------------ ------- ----------- -- ------------------------------------ ----- --- ----- ------ -- -- ------ ------- ---------展开代码
这个代码添加了一个 filter 状态来存储当前任务过滤器。我们还添加了三个按钮来切换任务过滤器，并更新 filteredTasks 变量来根据过滤器筛选任务。
现在，我们可以在浏览器中查看应用程序，并尝试使用过滤器来筛选任务。我们应该可以看到任务被成功筛选。
结论
在本文中，我们通过一个实例学习了如何使用 React 和 Redux 实现一个 TodoList 应用程序。我们学习了如何添加任务、删除任务、标记任务为已完成、显示所有任务、显示未完成任务和显示已完成任务。这些功能可以帮助我们更好地管理任务，并使我们的工作更加高效。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6779f3a25c5a933a340ecac7
