Redux 和 React 结合实现任务管理系统

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

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：

  1. 将 store 对象传递给 Provider 组件并将其包裹在应用程序的顶层组件中。
  2. 使用 connect 函数将 React 组件连接到应用程序状态。
  3. 将任务管理的数据和操作存储在 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

阅读全文

猜你喜欢

  • ECMAScript 2018 中的函数式编程

    ECMAScript 2018 中的函数式编程 ECMAScript 2018 中的函数式编程成为了许多前端开发者们热门的话题。在函数式编程中，函数被视为是数学上的映射，它接收一个或多个参数，执行一定...

    8 天前
  • React 中改变 props 的正确做法

    在 React 中，props 是组件与组件之间传递数据的重要方式，但是在实际开发中，我们经常会遇到需要动态改变 props 的情况。然而，直接改变 props 是一个危险的做法，可能会导致不可预期的...

    8 天前
  • 前端开发架构下的无障碍化设计

    背景 网络已经成为我们生活中不可或缺的一部分，我们几乎每天都在使用网络。然而，对于一些残障人士或老年人来说，访问网络内容却存在一些障碍。这种情况对于前端开发者来说是个挑战，我们应该确保网站可以被所有人...

    8 天前
  • RxJS 应用之实现注销登录

    介绍 在我们的应用程序中，注销登录的功能是不可或缺的。本文将介绍如何使用 RxJS 来实现注销登录的功能。RxJS 是一个功能强大且易于理解的响应式编程库，可以使我们的代码更加简洁易懂。

    8 天前
  • 使用 React 打造单页应用中的页面切换动画

    引言 单页应用已经成为了现在 Web 开发的主流技术之一，其能提供流畅的用户体验和快速的页面切换。而这些特征在移动设备上表现得尤为突出。但是，单页应用的一个缺陷是，由一个页面跳转到另一个页面时，页面的...

    8 天前
  • 使用 Webpack 在项目中集成 Antd 框架

    前言 Antd 是一款基于 React 的 UI 框架，它提供了许多常用的 UI 组件，例如按钮、表单、弹窗等，可以帮助开发者快速构建美观、易用的页面。对于前端开发者来说，如何在项目中引入并使用 An...

    8 天前
  • 使用 ES6 的 default 参数值避免 Type Error

    在 Web 前端开发中，我们经常会遇到函数参数类型错误（Type Error）的问题。而这些问题往往都可以通过应用 ES6 的 default 参数值来避免。本文将介绍 default 参数值的概念、...

    8 天前
  • Docker 容器把主机文件映射到容器内出现权限问题该怎么办？

    背景 Docker 是一个开源的应用容器引擎，它可以让开发者打包自己的应用程序及依赖包到一个可移植的容器中，然后发布到任意的 Linux/Windows 上，实现跨平台、跨系统的应用部署。

    8 天前
  • 在 Serverless 上开发微服务，一份完整的指南

    Serverless 架构是云计算领域的一项新技术，它允许开发者编写和运行无服务器代码。Serverless 架构具有无需管理服务器、低延迟、横向扩展等优势，成为云计算领域的新宠儿。

    8 天前
  • Socket.io 与 Ajax 的优缺点比较及开发中应用技巧

    简介 在前端开发中，为了实现实时数据通信和数据更新，常常需要使用到两种重要的通信技术：Socket.io 和 Ajax。本文将详细介绍 Socket.io 和 Ajax 的优缺点，并提供开发中应用技巧...

    8 天前
  • 如何在 CSS Reset 的基础上设置你所需要的样式

    前言 在开发网页时，经常会遇到不同浏览器之间的样式差异问题。为了解决这个问题，我们可以使用 CSS Reset。CSS Reset 是一种清除一些浏览器默认样式并以一致的方式渲染网页的方法，这通常是在...

    8 天前
  • SSE 实时性分析与算法实现

    介绍 Server-Sent Events（SSE）是一种 HTTP 实时通信技术，它通过单项连接从服务器向客户端发送数据，允许服务器推送事件到客户端，并在事件发生时实时更新客户端。

    8 天前
  • Flexbox 优雅降级布局

    在前端开发中，网页布局是很重要的一部分。我们需要让页面看起来美观、清晰，并且在各种设备上都能有良好的用户体验。在过去，我们通常使用 float、position、table 等方式来实现网页的布局，但...

    8 天前
  • GraphQL 中如何处理无权限请求？

    在 GraphQL 应用程序开发过程中，我们经常会遇到需要对请求进行权限控制的情况。比如，某些查询或者修改操作需要特定的用户权限才能进行，而其他用户则不能执行。在这些场景下，我们需要能够识别用户的身份...

    8 天前
  • RESTful API 设计中常见的三种安全问题及解决方案

    在现代网络应用开发中，RESTful API 已被广泛使用。但是，由于其开放性和易用性，RESTful API 的安全性也成为了一个重要的问题。本文将介绍 RESTful API 设计中常见的三种安全...

    8 天前
  • 在使用 Mocha 测试框架时发生的 “No reporter found” 问题解决方法

    在使用 Mocha 测试框架时，有时会遇到 “No reporter found” 的错误提示，这意味着 Mocha 找不到可用的报告工具生成测试报告。这个问题很常见，但通常很容易解决。

    8 天前
  • Webpack构建多页面应用的相关技巧

    在前端开发中，构建工具已经成为不可或缺的一部分。而在构建工具中，Webpack 以其强大的打包和代码分割能力，成为了各大企业和开发者们钟爱的工具之一。Webpack不仅能够擅长构建单页面应用，也很适合...

    8 天前
  • 使用 Kubernetes 进行日志分析和监控

    Kubernetes 是一种开源的容器编排平台，能够自动化地管理容器化应用程序的部署、伸缩、以及运行等方面。而对于运维人员而言，日志分析和监控是必不可少的工作之一。

    8 天前
  • 在Express.js应用程序中使用模板引擎

    本教程将教你如何在Express.js应用程序中使用模板引擎。模板引擎是前端开发中用于动态渲染页面的工具，能够使您的应用程序更加交互和有趣。 步骤 1 - 安装模板引擎 Express.js支持多种不...

    8 天前
  • CSS Reset 应用场景效果详解

    在前端开发中，CSS Reset 是一个非常重要的概念。它旨在解决 Web 页面在不同浏览器中显示样式不统一的问题，让样式更加可控，并为后续的样式定义打下基础。 什么是 CSS Reset？ CSS ...

    8 天前

相关推荐

    暂无文章