React+Redux 实战教程:打造复杂的 SPA 应用

阅读时长 10 分钟读完

React 是一个高效、灵活且强大的 JavaScript 库,广泛应用于构建 Web 应用程序。Redux 是一个可预测的状态容器,帮助管理 React 应用程序的状态。在本教程中,我们会教授您如何结合 React 和 Redux 来打造复杂的 SPA 应用。

前置知识

在开始本教程前,你需要具备以下知识:

  1. 基本的 HTML、CSS 和 JavaScript 知识。
  2. 了解 React 和 Redux 的基本概念和语法。
  3. 熟悉 Node.js 和 NPM。

如果你还不熟悉上面列举的知识点,可以先学习官方文档或者其他的学习资源来获取相关知识的。

准备工作

我们将使用 create-react-app 工具来初始化我们的项目。如果你没有安装该工具,请先安装它:

安装完成后,在命令行中执行以下命令,创建一个新项目:

这个命令将创建一个新的 React 应用程序,其中包含一些示例代码和配置文件。

接着,我们需要安装一些必要的依赖项:

  • react-redux: 提供了一个 React 组件,帮助我们在 React 应用程序中使用 Redux。
  • redux: 状态管理器,帮助我们管理和维护应用程序状态。
  • redux-thunk: Redux 的中间件,帮助我们处理异步操作。

编写应用程序

在这个示例应用程序中,我们将创建一个 todoList 应用程序。该应用程序允许用户添加、编辑和删除任务。

该应用程序将包含以下组件:

  • TodoList:显示任务列表。
  • TodoForm:用于添加或编辑任务。

我们需要首先创建一个 Redux store,包含一个初始状态和一些组件可以更新该状态。在 src 目录下的 index.js 文件中,添加以下代码:

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

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

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

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

我们使用 createStore() 方法来创建一个新的 Redux store,传递应用程序的初始状态和中间件 thunk

接着,我们将使用 Provider 来包装我们的应用程序,以便每个组件都能够使用 Redux store。Provider 是一个高阶组件,用于向 React 应用程序提供 Redux store。

最后,在 src 目录下创建一个 reducers.js 文件,用于处理应用程序状态的更新:

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

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

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

我们定义了一个名为 todoReducer 的 reducer,用于处理应用程序状态的更新。combineReducers() 方法将多个 reducer 组合成一个根 reducer,并在 Store 中将其作为单个函数使用。

接下来,我们将编写具体的组件。

TodoList

TodoList 组件用于显示任务列表,它将从 Redux store 中获取任务列表并将其显示出来。代码如下:

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

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

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

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

我们使用 connect() 方法将 TodoList 组件与 Redux store 连接。mapStateToProps 函数用来将 store 中的 state 映射到组件的 props 属性中。

当我们添加、编辑或删除任务时,TodoList 组件将自动更新任务列表,因为它已连接到 Redux store 中的 todos 数据。

TodoItem

TodoItem 组件用于显示单个任务和提供编辑和删除任务的选项。代码如下:

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

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

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

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

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

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

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

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

我们使用 connect() 方法将 TodoItem 组件连接到 Redux store。我们还引入了两个操作:deleteTodoeditTodo。这两个操作调用 store.dispatch() 方法来更新 Redux store。

当我们点击“编辑”按钮时,editing 状态将设置为 true,从而在 <input> 中显示任务的当前标题。当用户单击“保存”按钮时,我们将调用 editTodo 操作,并将 store 中的任务数据更新为新数据。

当点击“删除”按钮时,我们将调用 deleteTodo 操作,其将从 store 中删除选定的任务数据。

TodoForm

TodoForm 组件用于添加和编辑任务。这个组件也需要和 Redux store 进行交互,以便能够添加新的任务数据。

代码如下:

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

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

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

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

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

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

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

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

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

我们使用 connect() 方法将 TodoForm 组件连接到 Redux store。当我们添加新的任务时,我们将title 信息传递给 addTodo 操作,将新任务添加到 store 中。

结论

React 和 Redux 组合在一起后,可以轻松管理您的应用程序状态,从而使代码更加可维护和可扩展。借助 Redux 的可预测性,您可以更轻松地调试和测试代码,并且可以清晰地了解应用程序状态的更改。

这个示例应用程序只是针对 React 和 Redux 的简单实践,您可以使用相同的思路构建更复杂的应用程序。如果您遇到了具体的问题,请查看官方文档或寻求相关帮助来获取更详细的解答。

示例代码

根据以上的编写,您可以在 Github 上查阅完整的示例代码:

https://github.com/ysqyq/react-redux-todo-app

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

纠错
反馈