React+Redux 实战:实现一个 TodoList 应用

阅读时长 10 分钟读完

在前端开发中,React 和 Redux 是目前最流行的技术框架之一。如果你想提高自己的前端开发技能,同时学习如何使用这两种强大的技术,那么本文将会是一个很好的起点。我们将会详细介绍如何使用 React 和 Redux 实现一个 TodoList 应用,并且提供示例代码和深入学习的指导意义。

TodoList 应用功能介绍

TodoList 应用是一个在日常生活和工作中非常有用的工具。它可以帮助你记录待完成的任务,并且让你更加高效地完成它们。在这个项目中,我们将会实现以下功能:

  1. 添加一个待完成的任务;
  2. 删除一个已经完成的任务;
  3. 标记一个任务为已经完成;
  4. 查看当前所有待完成和已完成的任务。

实现 TodoList 应用

在实现 TodoList 应用之前,我们需要先安装必要的依赖,包括 React、Redux、React-Redux 和 Redux-thunk。你可以使用以下命令进行安装:

创建 Redux Store

在实现 TodoList 应用之前,我们需要先创建一个 Redux store,它将会存储应用程序的全局状态。在本项目中,我们需要存储当前所有待完成和已完成的任务列表。

我们将会创建一个 store.js 文件,用于创建和导出 Redux store:

在上述代码中,我们使用 createStore 方法创建一个 Redux store,传入了一个来自 ./reducers.js 文件的 rootReducer 参数。我们还使用了 applyMiddleware 方法将 thunk 中间件应用到 store 中。

创建 Action

在 Redux 中,Action 是一个包含了数据的普通对象,它描述了发生了什么事件。在本项目中,我们创建了以下 Action:

添加一个待完成任务

删除一个已完成任务

标记一个任务为已完成

创建 Reducer

在 Redux 中,Reducer是用来描述不同 action 如何更新 state 的纯函数。在我们的项目中,我们创建了一个 reducer 文件夹,并在其中创建了 index.js 文件,它导出了一个 rootReducer:

todoReducer.js 文件中,我们定义了不同的 Action 如何改变 todos 状态:

-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
  ------ ------------- -
    ---- -----------
      ------ ---------- ----------------
    ---- --------------
      ------ ----------------- -- ------- --- -------------------
    ---- --------------
      ------ -------------- -- -
        -- -------- --- ------------------ -
          ------ - -------- ---------- --------------- --
        -
        ------ -----
      ---
    --------
      ------ ------
  -
--

------ ------- ------------

在上述代码中,我们使用 switch 语句处理不同的 action。当 ADD_TODO 被触发时,我们使用 [...state, action.payload] 方法更新 state。这将会使用 ES6 的展开运算符,来将一个新的待完成任务添加到当前的任务列表中。

DELETE_TODO 被触发时,我们使用 filter 方法来过滤掉指定的任务。

TOGGLE_TODO 被触发时,我们使用 map 方法来遍历当前的任务列表,查找到指定的任务,并将它的 completed 属性进行取反,以更新当前任务的完成状态。

创建 React 组件

现在,我们已经准备好了后端的所有逻辑,在本节中,我们将会创建 React 组件来展示 TodoList。

TodoInput 组件

我们将首先创建一个 TodoInput 组件,它将会用于添加待完成的任务。

src/components 文件夹中,创建 TodoInput.jsx 文件并声明以下代码:

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------

----- --------- - -- -------- -- -- -
  ----- ------ -------- - -------------

  ----- ------------ - --- -- -
    -------------------
    -- -------------- -
      -------
    -
    ------------------------
    ------------
  --

  ------ -
    ----- ------------------------
      ------ ------------ ------------- -- ------------------------ --
      ------- ----------------- -------------
    -------
  --
--

------ ------- ---------------------

在上述代码中,我们使用 useState 设置了本组件内部的 text 状态。然后我们使用 handleSubmit 方法处理 onSubmit 事件,向 reducer 中添加新的待完成任务。

我们还使用 connect 函数将 TodoInput 组件连接到 Redux store 中,以便我们可以将 addTodo Action 向 store 分发。

TodoList 组件

接下来,我们将会创建一个用于展示所有待完成和已完成任务的 TodoList 组件。

src/components 文件夹中,创建 TodoList.jsx 文件并声明以下代码:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------- ---------- - ---- -------------

----- -------- - -- ------ -------- -- -- -
  ----- ------------ - ---- -- -
    -------------------------
  --

  ----- ------------ - ---- -- -
    -------------------------
  --

  ------ -
    ----
      --------------- -- -
        ---
          -------------
          -------- --------------- -------------- - -------------- - ------ --
        -
          ----- ----------- -- -----------------------
            -----------
          -------
          ------- ----------- -- ---------------------------------
        -----
      ---
    -----
  --
--

----- --------------- - ----- -- --
  ------ -----------
---

------ ------- -----------------------------------

在上述代码中,我们使用 mapStateToProps 函数将 store 中的 todos 状态映射绑定到当前组件的 props 上。然后我们分别创建了 handleDeletehandleToggle 方法用于删除和标记任务为已完成。

TodoApp 组件

现在我们已经创建了两个组件,但是我们还需要将它们封装在一个更高层的容器组件中。在 src/components 文件夹中,创建一个 TodoApp.jsx 组件,内容如下:

-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
------ -------- ---- -------------

----- ------- - -- -- -
  ------ -
    -----
      ---------- --
      --------- --
    ------
  --
--

------ ------- --------

在上述代码中,我们导入了 TodoInputTodoList 组件,并将它们渲染在 TodoApp 渲染函数内部。

将 TodoApp 组件渲染至 DOM

在创建了 TodoApp 组件之后,我们需要将它渲染到页面的 DOM 中。在 src 目录下创建一个 index.js 文件,并输入以下代码:

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ------- ---- -----------------------
------ ----- ---- ----------

----------------
  --------- --------------
    -------- --
  ------------
  -------------------------------
--

在上述代码中,我们使用 ReactDOM.render 方法将 TodoApp 组件渲染到 DOM 中。我们还载入了 Redux store,将它作为 Provider 组件的参数,这样我们的所有组件都可以访问到 state 和 dispatch 方法。

总结

本文详细介绍了如何使用 React 和 Redux 来实现一个 TodoList 应用。我们从创建 store 和 action,到 reducer 和组件的创建,以及最后的渲染到 DOM,都进行了详细的讲解。希望通过本文的学习,你能够对 React 和 Redux 的应用有更深入的了解,并且能够应用到自己的项目中。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c2671a83d39b488166870e

纠错
反馈