Redux 和 React 结合实现任务管理系统
在前端开发中，随着应用程序的复杂度不断增加，管理应用程序的状态变得越来越困难。Redux 是一个流行的 JavaScript 应用程序状态管理库，它处理了应用程序需要的所有状态，并与 React 非常搭配，可以很容易地实现功能强大的任务管理系统。本文将详细介绍 Redux 和 React 结合实现任务管理系统的过程，并提供示例代码。
安装和配置 Redux
首先，我们需要安装 Redux。可以使用 npm 或 yarn 命令进行安装：
--- ------- ----- ---- --- -----
在项目中，我们需要创建一个 store 对象，它将存储该应用程序的所有状态。我们可以使用 Redux 提供的 createStore 方法来创建 store 对象：
------ - ----------- - ---- -------- ----- ----- - ---------------------
其中，reducer 是一个返回新状态的函数。每当我们需要更新状态时，我们将调用该函数，并将当前状态和更新操作作为参数传递。我们要修改状态时，必须要使用 store.dispatch 方法来调用 reducer（示例代码中会有说明）。
创建任务管理系统的状态对象
接下来，我们需要定义任务管理系统的状态对象。在本示例中，我们将使用以下状态：
tasks：一个数组，存储所有任务filter：一个字符串，用于过滤任务nextId：一个整数，表示下一个任务的 ID
----- ------------ - - ------ --- ------- ------ ------- -- --
编写 Reducer
我们接下来可以编写 reducer 函数了。以下是本示例中 reducer 函数的示例代码：
-------- ------------- - ------------- ------- -
------ ------------- -
---- ----------- -
----- ------- - -
--- -------------
----- --------------------
---------- ------
--
------ -
---------
------ ---------------- ---------
------- ------------ - --
--
-
---- -------------- -
----- - --- ----- --------- - - ---------------
----- ----- - -------------------------- -- ------- --- ----
----- ----------- - -
----------------------
----- ---- -- ------------------------
---------- --------- --- --------- - ---------------------------- - ----------
--
----- ----- - -----------------
------------------- -- -------------
------ -
---------
------
--
-
---- -------------- -
----- ----- - -------------------------- -- ------- --- -------------------
----- ----- - -----------------
------------------- ---
------ -
---------
------
--
-
---- ------------- -
------ -
---------
------- ----------------------
--
-
--------
------ ------
-
-在以上代码中，我们处理了四个动作：添加任务、更新任务、删除任务和过滤任务。每个动作都有一个类型和一个 payload，用于描述动作的具体内容。
ADD_TASK动作将添加一个新的任务到状态中UPDATE_TASK动作将更新一个任务的文本和完成状态DELETE_TASK动作将删除一个任务SET_FILTER动作将更新当前任务的筛选方式
在 React 中使用状态管理
接下来，我们将在 React 中使用该状态管理。我们将编写代码以从状态对象中读取任务和设置过滤器，以及从视图中创建新任务。
从状态中读取和渲染任务
首先，我们将定义渲染任务的组件：
-------- ----------- -
----- - ----- --------- -------- - - ------
------ -
-----
------
---------------
------------------------
------------ -- ---------- --- -------- ---------- --------------- ---
--
------
-----------
-----------------
--------------- -- ---------- --- -------- ----- ------------------ ---
--
------- ----------- -- ----------------------------------
------
--
-在上述代码中，我们定义了一个 Task 组件，它将出现在任务列表中。它包含一个复选框、一个文本框和一个删除按钮，用于更改任务的完成状态和文本内容，并在完成后删除任务。
接下来，我们将定义任务列表：
-------- --------------- -
----- - ------ --------- -------- - - ------
------ -
-----
--------------- -- -
----- ------------- ----------- ------------------- ------------------- --
---
------
--
-在上述代码中，我们定义了一个 TaskList 组件，它会渲染所有任务，每行显示一个任务。
设置过滤器
我们接下来将定义组件，可用于选择任务列表要满足哪些条件（例如，只显示未完成任务）。下面是过滤器组件的示例代码：
-------- ------------- -
----- - ------ ------- - - ------
------ -
------- ----------- -- --------------------------------
--
-
-------- ----------------- -
----- - ------------- -------- - - ------
------ -
-----
------- ----------- ------------------ -------------------- --- ------ --
------- -------------- ------------------ -------------------- --- --------- --
------- ----------------- ------------------ -------------------- --- ------------ --
------
--
-在上述代码中，我们定义了一个 Filter 组件，用于在选中情况下呈现一个条件按钮。我们还定义了一个 FilterList 组件，它将呈现所有过滤器按钮，并将当前选定按钮的状态存储在 activeFilter 中。
创建新任务
我们将定义一个新任务表单组件，用于创建新任务并将其添加到任务列表中。下面是示例代码：
----- ----------- ------- --------------- -
----- - -
----- ---
--
------------ - ----- -- -
--------------- ----- ------------------ ---
--
------------ - ----- -- -
-----------------------
----- - ---- - - -----------
--------------------------
--------------- ----- -- ---
--
-------- -
------ -
----- -----------------------------
------ ----------- ----------------------- ---------------------------- --
------- ----------------- -------------
-------
--
-
-在上述代码中，我们定义了一个表单，可以用来设置新任务的文本内容。当表单提交时，我们将使用 onSubmit 函数将新任务添加到状态中。
整合 React 和 Redux
我们通过完成 React 和 Redux 状态管理的构建块来构建我们的任务管理系统。接下来，我们将根据以下步骤整合 React 和 Redux：
- 将
store对象传递给Provider组件并将其包裹在应用程序的顶层组件中。 - 使用
connect函数将 React 组件连接到应用程序状态。 - 将任务管理的数据和操作存储在 React 组件的本地状态中。
整合 store 和 Provider
首先，我们将在应用程序的顶层组件中添加 Provider 组件。Provider 是 Redux 提供的一个组件，用于将 store 对象传递给 React 组件树：
------ - -------- - ---- --------------
----------------
--------- --------------
---- --
------------
-------------------------------
--连接 React 组件和状态
接下来，我们将连接 TaskList 组件和状态，以便可以从 store 中读取任务列表并更新它：
------ - ------- - ---- --------------
-------- --------------- -
------ -
-----
--------------------- -- -
----- ------------- ----------- --------------------------- --------------------------- --
---
------
--
-
----- --------------- - ----- --
------------ --- -----------
- - ------ ----------------------- -- --------------- -
- ------------ --- --------
- - ------ ----------------------- -- ---------------- -
- - ------ ----------- --
----- ------------------ - -
----------- ------- -- -- ----- -------------- ------- ---
----------- -- -- -- ----- -------------- -------- - -- - ---
--
------ ------- ------------------------ ------------------------------在以上代码中，我们首先传递 mapStateToProps 函数以将状态映射到组件的本地状态（在本例中为 props.tasks）。然后，我们传递 mapDispatchToProps 函数以将操作映射到组件的本地状态（在本例中为 props.updateTask 和 props.deleteTask）。
在 React 组件中存储本地状态
最后，我们将创建一个本地状态，用于存储新任务并将其提交到 store 中：
----- ----------- ------- --------------- -
----- - -
----- ---
--
------------ - ----- -- -
--------------- ----- ------------------ ---
--
------------ - ----- -- -
-----------------------
----- - ---- - - -----------
-------------------------
--------------- ----- -- ---
--
-------- -
------ -
----- -----------------------------
------ ----------- ----------------------- ---------------------------- --
------- ----------------- -------------
-------
--
-
-
----- ------------------ - -
-------- ---- -- -- ----- ----------- -------- - ---- - ---
--
------ ------- ------------- ---------------------------------在以上代码中，我们定义了一个本地状态，用于存储新任务的文本内容。当表单提交时，我们将使用 props.addTask 函数将新任务添加到 store 中。
示例应用
最后，让我们来看一个完整的任务管理应用的示例代码：
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - --------- ------- - ---- --------------
----- ------------ - -
------ ---
------- ------
------- --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ----------- -
----- ------- - -
--- -------------
----- --------------------
---------- ------
--
------ -
---------
------ ---------------- ---------
------- ------------ - --
--
-
---- -------------- -
----- - --- ----- --------- - - ---------------
----- ----- - -------------------------- -- ------- --- ----
----- ----------- - -
----------------------
----- ---- -- ------------------------
---------- --------- --- --------- - ---------------------------- - ----------
--
----- ----- - -----------------
------------------- -- -------------
------ -
---------
------
--
-
---- -------------- -
----- ----- - -------------------------- -- ------- --- -------------------
----- ----- - -----------------
------------------- ---
------ -
---------
------
--
-
---- ------------- -
------ -
---------
------- ----------------------
--
-
--------
------ ------
-
-
----- ----- - ---------------------
-------- ----------- -
----- - ----- --------- -------- - - ------
------ -
-----
------
---------------
------------------------
------------ -- ---------- --- -------- ---------- --------------- ---
--
------
-----------
-----------------
--------------- -- ---------- --- -------- ----- ------------------ ---
--
------- ----------- -- ----------------------------------
------
--
-
-------- --------------- -
------ -
-----
--------------------- -- -
----- ------------- ----------- --------------------------- --------------------------- --
---
------
--
-
----- --------------- - ----- --
------------ --- -----------
- - ------ ----------------------- -- --------------- -
- ------------ --- --------
- - ------ ----------------------- -- ---------------- -
- - ------ ----------- --
----- ------------------ - -
----------- ------- -- -- ----- -------------- ------- ---
----------- -- -- -- ----- -------------- -------- - -- - ---
--
-------- - ------------------------ ------------------------------
-------- ------------- -
----- - ------ ------- - - ------
------ -
------- ----------- -- --------------------------------
--
-
-------- ----------------- -
------ -
-----
------- ----------- ------------------------- -------------------- --- ------ --
------- -------------- ------------------------- -------------------- --- --------- --
------- ----------------- ------------------------- -------------------- --- ------------ --
------
--
-
----- ------------------ - ----- -- -- ------- ------------ ---
----- --------------------- - - ---------- ------ -- -- ----- ------------- -------- - ------ - -- --
---------- - --------------------------- -----------------------------------
----- ----------- ------- --------------- -
----- - -
----- ---
--
------------ - ----- -- -
--------------- ----- ------------------ ---
--
------------ - ----- -- -
-----------------------
----- - ---- - - -----------
-------------------------
--------------- ----- -- ---
--
-------- -
------ -
----- -----------------------------
------ ----------- ----------------------- ---------------------------- --
------- ----------------- -------------
-------
--
-
-
----- ---------------------- - -
-------- ---- -- -- ----- ----------- -------- - ---- - ---
--
----------- - ------------- -------------------------------------
-------- ----- -
------ -
-----
------------ --
--------- --
----------- --
------
--
-
----------------
--------- --------------
---- --
------------
-------------------------------
--结论
通过 Redux 和 React，我们可以轻松地创建出一个功能强大的任务管理系统。对于更大型的应用程序，使用 Redux 来管理应用程序状态可以帮助我们保持数据的一致性和正确性，从而使开发过程更加高效和愉快。此外，掌握 Redux 意味着掌握了一种非常流行的前端开发技能，这对于寻找工作或提高工作技能都是非常有益的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722f2422e7021665e0d8f52