React 是一种用于构建用户界面的 JavaScript 库，而 Redux 是一个用于管理应用程序状态的库。它们广泛被用于现代 web 应用程序中，因为它们提供了高效、可重用的代码组织方式。
基础知识
React 的核心思想是组件化。每个组件都有自己的状态和属性，它们可以被动态地更新以响应用户的输入或其他事件。为了使组件之间共享数据，我们可以使用 Redux 来管理应用程序的全局状态。Redux 使用单一的全局 store 来保存所有的状态，并提供了一些工具来处理数据变化并保持应用程序的一致性。
实战演练
在本节中，我们将构建一个简单的 Todo List 应用程序，以展示如何使用 React 和 Redux 进行实战开发。
步骤 1：创建 React 应用程序
首先，我们需要安装并创建一个新的 React 应用程序。我们可以使用 Create React App 工具快速启动项目：
npx create-react-app my-todo-list
这会在当前目录下创建一个名为 my-todo-list 的新项目文件夹。
步骤 2：添加 Redux
接下来，我们将添加 Redux 并设置基本的 store。我们需要安装以下依赖项：
npm install --save redux react-redux
然后，在 src 目录下创建一个新文件夹 store，并添加一个名为 index.js 的新文件。这个文件将包含我们的全局状态和 Redux 配置。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ----------------
--
---- --------------
------ -
---------
------ ----------------------- -- ------- --- ----------------
--
--------
------ ------
-
-
------ ----- ----- - -------------------------在这个文件中，我们首先定义了初始状态 initialState，它只包含一个空数组 todos。然后，我们编写了一个叫做 rootReducer 的函数，它会根据不同的 action 类型更新状态。在这个例子中，我们只有两种类型的 action：ADD_TODO 和 REMOVE_TODO。当我们收到一个 ADD_TODO 操作时，我们将新的待办事项添加到 todos 数组中；当我们收到一个 REMOVE_TODO 操作时，我们将该待办事项从数组中删除。
最后，我们使用 createStore 函数从 rootReducer 创建了一个新的 store，并将其导出以供其他模块使用。
步骤 3：添加 React 组件
现在我们已经设置好了 Redux，我们可以开始编写我们的第一个 React 组件。在 src 目录下创建一个新文件夹 components，并添加一个名为 TodoList.js 的新文件。这个组件将渲染我们的 Todo List 并与 Redux store 进行交互。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ ----------- - ---- --------------
-------- ---------- -
----- ------ -------- - -------------
----- ----- - ----------------- -- -------------
----- -------- - --------------
-------- --------------- -
-- ------ -
----------
----- -----------
-------- -
--- -----------
-----
--
---
------------
-
-
-------- -------------------- -
----------
----- --------------
-------- ---
---
-
------ -
-----
------ ------------ ----------- -- ------------------------ --
------- ------------------------------------
----
---------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------