TodoList 是一个简单的应用，它可以帮助你记录和管理任务清单。在这篇文章中，我们将使用 React 和 Redux 技术栈实现一个 TodoList 应用。本文假设您已经了解了 React 和 Redux 的基本知识，并且具备一定的 JavaScript 编程基础。
开始之前需要做的准备工作
在开始编写应用程序之前，您需要执行以下步骤：
安装 Node.js 环境：您需要在本地计算机上安装 Node.js 环境，并且确保已经成功安装。
安装 React 和 Redux 模块：您需要通过 npm 命令行工具安装 React 和 Redux 模块，以便在代码中使用它们。
执行以下命令：
npm install --save react react-dom redux react-redux
- 安装开发工具：您需要安装一些开发工具，以便于编写和调试代码。您可以选择自己喜欢的集成开发环境（IDE）或文本编辑器，本文将使用 Visual Studio Code。
实现步骤
1. 创建 TodoList 应用的文件夹和文件
在本地计算机上创建一个名为 todolist 的文件夹，并在其中创建以下文件：
- index.html - index.js - App.js - TodoList.js - reducers.js - actions.js
2. 编写 index.html 文件
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ -------- ---------- ------- ------ ---- ---------------- ------- -------------------------- ------- -------
3. 编写 index.js 文件
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--4. 编写 App.js 文件
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
-------- ----- -
------ -
-----
------------ -------
--------- --
------
--
-
------ ------- ----5. 编写 TodoList.js 文件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- ---------- - ---- ------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
----------- --
--
-
----------------- - - -- -
--------------- ----------- -------------- ---
--
------------- - -- -- -
----------------------------------------------------
--------------- ----------- -- ---
--
---------------- - -- -- -
------------------------------------
--
-------- -
----- - ---------- - - -----------
----- - ----- - - -----------
------ -
-----
-----
------
-----------
------------------
---------------------------------
--
------- ------------------------------------------
------
----
--------------- -- -
---
-------------
----------- -- -------------------------------
-------- --------------- -------------- - -------------- - ------ --
-
-----------
-----
---
-----
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- -----------------------------------6. 编写 reducers.js 文件
-- -------------------- ---- -------
------ - --------- ----------- - ---- ------------
----- ------------ - -
------ --
--
--- ---------- - --
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
--- -------------
----- ------------
---------- -----
-
-
--
---- ------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
--
--------
------ ------
-
-
------ ------- ------------7. 编写 actions.js 文件
-- -------------------- ---- ------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ -------- ------------- - ------ - ----- --------- ---- -- - ------ -------- -------------- - ------ - ----- ------------ -- -- -
8. 运行 TodoList 应用
使用 npm 命令行工具启动 TodoList 应用：
npm start
打开浏览器，访问 http://localhost:3000，就可以查看 TodoList 应用了！您现在可以添加新的任务，也可以单击任何一个任务来标记它完成。
总结
在本文中，我们详细地介绍了如何使用 React 和 Redux 技术栈来编写 TodoList 应用。我们讨论了一些关键概念和技术，例如 Redux store、Redux reducer、Redux action 和 React 组件等等。希望这篇文章能够帮助读者更深入地理解 React 和 Redux，以及它们如何在实际项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496908348841e98943bed41