React+Redux 的 Web App 开发实践

React 和 Redux 是目前前端开发中最流行的技术框架之一。React 负责构建网页 UI,而 Redux 则负责构建可复用和可扩展的状态管理。本文将介绍如何结合使用 React 和 Redux,以及其开发 Web App 的实践。

基础知识

在开始实践之前,首先需要了解一些基础知识。

React

React 是由 Facebook 开发并维护的一款前端框架,用于构建大型且高性能的单页应用程序(SPA)。它使用声明性组件化的方式,使得代码易于理解和维护。React 采用了虚拟 DOM 技术,可以最小化 DOM 操作,加快页面渲染速度。

Redux

Redux 是一个 JavaScript 应用程序状态容器,可用于管理 React 应用中的状态。通过 Redux,您可以在应用程序中全局维护一个存储状态的容器。Redux 使得状态管理更为简单和可预测,并帮助开发者轻松编写可重用和可扩展的代码。

ES6

React 和 Redux 适用于 ES6,该语言提供了更多的语言功能,包括箭头函数、模板字面量、解构赋值、扩展操作符等等。这些语言功能使得代码更简洁且易于阅读。

实践步骤

接下来我们将通过一个实例来演示如何使用 React 和 Redux 开发 Web App。我们将创建一个简单的代办事项列表,用户可以添加和删除代办事项。

步骤 1:创建 React 应用

我们可以使用 create-react-app 工具来创建一个 React 应用。在终端中使用以下命令:

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

该命令将在当前目录中创建一个名为 todo-app 的 React 项目。

步骤 2:安装 Redux

在项目中安装 Redux:

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

我们还需要一个 redux-thunk 中间件来处理异步的 action。

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

步骤 3:创建 Redux Store

src 目录下创建一个名为 store.js 的文件,用于创建 Redux 的 store。

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

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

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

其中 rootReducer 为根 reducer,我们将在下一步创建。

步骤 4:创建 Reducer

src 目录下创建一个名为 reducers 的文件夹,并在其中创建一个名为 index.js 的文件。

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

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

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

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

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

我们定义了一个名为 todos 的 Reducer,用于处理添加和删除代办事项的 action。

步骤 5:创建 Action

src 目录下创建一个名为 actions.js 的文件。

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

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

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

我们定义了两个 action:addTododeleteTodo

步骤 6:创建组件

我们将创建三个组件:

  • TodoList:渲染代办事项列表。
  • TodoItem:表示单个代办事项。
  • AddTodo:用于添加待办事项。

src 目录下创建名为 components 的文件夹,并在其中创建这三个组件。

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

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

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

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

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

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

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

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

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

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

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

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

步骤 7:渲染组件

App.js 中,我们将渲染三个组件。

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

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

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

到这里,基本的代办事项列表就已经完成了。接下来,我们来看一下如何使用 Redux 处理异步操作。

步骤 8:处理异步 Action

我们将扩展 addTodo action,使其可以向 API 发送请求。这里我们使用 axios 发送请求。

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

actions.js 中进行修改:

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

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

addTodo action 现在是一个异步函数,它将返回一个函数,函数接受 dispatch 函数作为参数。

我们需要修改 AddTodo.js 组件,以便它能够调用新的 addTodo action。

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

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

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

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

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

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

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

通过修改 addTodo action 和 AddTodo.js 组件,我们现在可以向 API 发送 POST 请求,并向 Redux Store 中添加待办事项。

结论

在本文中,我们了解了如何结合使用 React 和 Redux 开发 Web App。我们通过实际案例对 React 和 Redux 的使用进行了演示,并介绍了如何使用 Redux 处理异步操作。

React 和 Redux 是强大的前端开发框架,它们的组合能够显著提高开发效率和代码可维护性。我们希望这篇文章对您有所帮助,并能够启发您开发更好的 Web App。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67175ea9ad1e889fe2213ba4