在现代 Web 开发中，React 以及 Redux 已经成为了非常流行的前端框架。React 主要负责视图层的渲染，而 Redux 则管理着应用程序的状态。它们可以协同工作，让开发者编写出高效、可维护的代码。在本文中，我们将通过一个实际的例子来学习一些 React 和 Redux 的基本用法。
例子介绍
假设我们有一个简单的待办事项应用程序，用户可以添加、完成和删除自己的待办事项。我们将通过 React 和 Redux 来实现这个应用程序，它将包含以下组件：
TodoForm：用于添加新的待办事项。TodoList：用于显示用户的待办事项列表。TodoItem：用于表示单个待办事项。
在 Redux 中，我们将拥有以下的状态：
-
------ -
- --- -- ----- --- ------ --
- --- -- ----- --- ------ --
- --- -- ----- -------- -
-
-当用户添加一个新的待办事项时，我们将会把它添加到 todos 数组中。
编写 TodoForm 组件
TodoForm 组件是用于添加新的待办事项的。它包含一个文本框和一个“添加”按钮。我们将使用 React 来编写这个组件。
------ ------ - --------- - ---- --------
----- -------- ------- --------- -
------------------ -
-------------
---------- - - ----- -- --
-
---------------- - ------- -- -
--------------- ----- ------------------ ---
-
------------ - ------- -- -
-----------------------
------------------------------------
--------------- ----- -- ---
-
-------- -
------ -
----- -----------------------------
------
-----------
--------------------------------
-----------------------
--
------- --------------------------
-------
--
-
-
------ ------- ---------在上面的代码中，我们使用了 React 的 state 来存储文本框中的值，并且定义了两个方法来处理输入框中的文本变化和表单的提交事件。当用户点击“添加”按钮时，我们将调用 addTodo 函数，并把当前文本框中的值作为参数传递给它。最后我们清空文本框，以准备添加下一个待办事项。
编写 TodoList 和 TodoItem 组件
TodoList 组件需要显示用户所有的待办事项。它将根据状态中的 todos 数组来呈现。对于每一个待办事项，它会创建一个 TodoItem 组件。
------ ------ - --------- - ---- --------
------ -------- ---- -------------
----- -------- ------- --------- -
-------- -
----- - ----- - - -----------
------ -
----
--------------- -- -
--------- ------------- ----------- --
---
-----
--
-
-
------ ------- ---------在 TodoList 组件中，我们使用了 ES6 的解构语法获取了 todos 属性。我们通过 map 函数遍历 todos 数组，并为每个元素创建一个 TodoItem 组件。我们将 todo 对象作为 props 传递给 TodoItem 组件。
TodoItem 组件只需要显示一个待办事项及其完成状态：
------ ------ - --------- - ---- --------
----- -------- ------- --------- -
------------ - -- -- -
------------------------------------------
-
------------ - -- -- -
------------------------------------------
-
-------- -
----- - ---- - - -----------
------ -
---
-------- --------------- -------------- - -------------- - ------ --
-
----- ----------------------------------------------
------- --------------------------------------
-----
--
-
-
------ ------- ---------在 TodoItem 组件中，我们记录了两个事件处理函数，handleToggle 和 handleDelete。当用户点击待办事项时，我们会调用 handleToggle 函数，并将其 id 作为参数。当用户点击“删除”按钮时，我们会调用 handleDelete 函数，并将其 id 作为参数。在 render 函数中，我们使用了条件式样式 textDecoration 来根据事项的完成状态来设置文本的样式。
编写 Redux 的 actions 和 reducers
现在我们已经完成了应用程序的所有组件。然而，我们还需要把它们连接起来，并使用 Redux 来管理应用程序的状态。
我们需要定义 actions 和 reducers 函数来处理我们的状态。actions 函数定义了动作类型和传递给 reducers 函数的数据。reducers 函数定义了如何处理每个 action 的数据，并返回一个新的状态对象。
-- ---------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ ----- ----------- - -------------- ------ -------- ------------- - ------ - ----- --------- ---- -- - ------ -------- -------------- - ------ - ----- ------------ -- -- - ------ -------- -------------- - ------ - ----- ------------ -- -- -
在上面的代码中，我们定义了三个 action 类型和三个函数，用于创建这些 actions。每个函数都返回一个对象，其中包含 type 属性和其他的数据（如待办事项的文本和 ID）。
接下来，让我们来定义 reducers 函数。Reducer 基于给定的“状态”和“动作”，计算并返回新的应用程序状态。
-- -----------
------ -
---------
------------
-----------
- ---- ------------
--- ---------- - --
------ ------- -------- ----------- - --- ------- -
------ ------------- -
---- ---------
------ -
---------
- --- ------------- ----- ------------ ---------- ----- -
--
---- ------------
------ -------------- --
-------- --- ----------
- - -------- ---------- --------------- -
- ----
--
---- ------------
------ ----------------- -- ------- --- -----------
--------
------ ------
-
-在上面的代码中，我们定义一个名为 todos 的 reducer 函数，并将其默认状态设置为空数组。在 reducer 函数中，我们使用了 switch 语句来根据不同的动作类型来处理 action 的数据。
对于 ADD_TODO 动作，我们创建了一个待办事项对象，并将其添加到现有状态数组中。我们还使用一个自增变量 nextTodoId 来为每个新的待办事项生成唯一的 id。
对于 TOGGLE_TODO 动作，我们使用 map 函数来遍历状态数组，并查找要修改的待办事项。一旦找到了待办事项，我们将其完成状态取反，并返回一个新的数组。
对于 DELETE_TODO 动作，我们使用 filter 函数来通过 ID 删除待办事项。
编写应用程序入口
现在我们已经定义了我们的组件、actions 和 reducers 函数。让我们来编写应用程序的入口文件，该文件将把这些组件连接起来，定义 store，并使用 React 和 ReactDOM 渲染整个应用程序。
-- --------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ -------- ---- -------------
------ -------- ---- -------------
------ ----------- ---- -------------
----- ----- - -------------------------
-------
--------- --------------
-----
--------- --
--------- --
------
------------
-------------------------------
--在上面的代码中，我们使用了 createStore 函数创建了一个 Redux store，并将 rootReducer 函数作为第一个参数传递给它。然后我们使用 render 函数将我们的组件渲染到 DOM 中。
结论
在本文中，我们学习了如何使用 React 和 Redux 来编写一个简单的待办事项应用程序。我们编写了三个组件——TodoForm、TodoList 和 TodoItem。我们还定义了 action 和 reducer 函数来管理应用程序的状态，并使用 React-Redux 中的 Provider 组件将整个应用程序连接起来。
本文只是一个简单的例子，但它可以作为你进一步学习 React 和 Redux 的基础。这里提供了源代码和其他资源供你参考。希望你能喜欢这个例子，并开始在你的项目中应用 React 和 Redux 的知识！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b0ab19babaf620fa71107