npm包：redux-loading-middleware 使用教程

在现代 web 应用开发中，Redux 是一个非常流行的 web 应用开发框架。而 redux-loading-middleware 是一个 Redux 中间件，它可以帮助你控制页面加载状态，为用户提供更好的用户体验。在这篇文章中，我们将学习如何使用 redux-loading-middleware。

前置技能

本教程假设读者：

  1. 已经掌握了 React 和 Redux 基本概念。
  2. 对 Redux Middleware 有一定的了解。

安装

要使用 redux-loading-middleware ，使用 npm 将它添加到你的项目中。

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

配置

使用 redux-loading-middleware ，你需要在你的 Redux store 中添加它作为一个 middleware 。为此，请参照以下步骤。

  1. 引用项目中的 redux-loading-middleware。

在 store.js 中：

------ - ------------ --------------- - ---- -------
------ ----------- ---- ------------
------ ----------------- ---- --------------------------
  1. 使用你的 Redux 中间件，在 applyMiddleware 中添加 loadingMiddleware 即可。
----- ----- - ------------
    ------------ -- -- -----------
    ---------------- 
        ------------------
        -- ----- --
    -
-

开始使用

现在，我们已经在 Redux Store 中添加了中间件，接下来让我们更改我们的 Action 在每次 dispatch 前或者返回结果后更新 loading 状态。

在我们的 Action 中，添加中间件 loading 。例如，我们要从服务器获取用户信息时，可以这样写 getUser() 函数。

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

每次执行该 Action 时，都会带有 loading 状态给 reducer ，让 reducer 知道当前的获取过程是否结束。

最后，将 loadingReducer 加入 Redux store：

store.js

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

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

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

示例代码

最后，为了更好地说明使用细节，附上完整的示例代码：

loadingMiddleware.js

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

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

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


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

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

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

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

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

userAction.js

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

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

userReducer.js

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

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

appReducer.js

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

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

最后，我们只需要使用 React 组件 <Loading> 将 loading 控制在页面层面，例如：

Loading.js

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

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

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

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

总结

在本文中，我们学习了如何使用 redux-loading-middleware 中间件来控制页面的加载状态。我们学习了如何添加 loadingMiddleware 中间件到 Redux store 中，以及如何在 Action 中使用 loading 状态来进行控制。我们还演示了完整的示例代码。现在，你可以在你的 React Web 应用程序中使用这个中间件了！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067007e361a36e0bce8a8e

阅读全文

猜你喜欢

  • npm 包 square-month 使用教程

    随着前端开发的不断发展，各种工具和库层出不穷。其中，npm 是目前最流行的包管理工具之一。在 npm 上，有一款叫做 square-month 的包，是用于生成月份日历的工具。

    4 年前
  • npm 包 spm-doc 使用教程

    随着前端技术的快速发展，我们开发的项目越来越复杂，文档也变得越来越重要。因此，我们需要一种有效的方式来管理和展示文档，让代码的维护和文档的更新变得更加容易和快捷。在这篇文章中，我们将介绍如何使用 np...

    4 年前
  • npm 包 square-wrapi 使用教程

    前言 在前端开发中，我们常常需要进行数字的四舍五入。通常情况下，我们会使用 JavaScript 中的内置函数 Math.round() 来完成。但有一些限制，比如 Math.round() 只能进行...

    4 年前
  • npm 包 squarebook 使用教程

    前言 随着前端技术的不断进步，我们可以利用各种工具去方便地完成我们需要的功能。因此，npm 包成为前端开发过程中不可或缺的一部分。其中，Squarebook 是一个能够对数组或对象进行平方操作的 np...

    4 年前
  • npm 包 spm-ftp 使用教程

    前言 在前端开发中，经常需要进行文件上传下载操作，而 FTP 是最古老、最广泛使用的文件传输协议之一。为了快速便捷地进行 FTP 操作，我们可以通过使用 npm 包 spm-ftp 来实现。

    4 年前
  • npm 包 squarejs 使用教程

    简介 SquareJS 是一款使用 TypeScript 编写的开源游戏引擎，它基于 pixi.js 构建，并提供了一系列的工具和接口，帮助开发者创建 2D 游戏。

    4 年前
  • npm 包 squarespace-cli 使用教程

    前言 Squarespace 是一个知名的网站建设平台，其提供了很多强大而易用的功能，让任何人都可以轻松地建立高品质的网站。而 squarespace-cli 则提供了一种快速而便捷的方式，让开发者可...

    4 年前
  • npm 包 squarespace-node-server 使用教程

    什么是 squarespace-node-server squarespace-node-server 是一个 Node.js 的模块，可以让你本地的开发环境模拟 squarespace 的服务器，从...

    4 年前
  • npm 包 Spray-wrtc 使用教程

    随着 web 技术的发展，现在越来越多的应用都不局限于网页和服务器，而是需要运行在各种不同的设备上。由于 web 技术因其广泛的适用性和可访问性而备受欢迎，因此前端开发人员需要寻找更多的方式来构建更加...

    4 年前
  • npm 包 spraycan 使用教程

    简介 在前端开发过程中，我们经常需要在页面中创建 Canvas 元素并且对这些元素进行绘制。但是在原生的 Canvas API 中，使用起来比较繁琐并且需要掌握一定的数学知识。

    4 年前
  • npm包spread-args的使用教程

    在前端开发中，我们常常需要处理传递的参数，使用npm包spread-args可以方便地将传递的参数展开。本文将介绍该npm包的使用教程。 spread-args是什么？ spread-args是一个n...

    4 年前
  • npm 包 sprayer 使用教程

    简介 sprayer 是一个基于 gulp 的自动化雪碧图工具，可用于构建前端项目中所需的雪碧图，以加速网站的加载速度。本文将向您介绍 sprayer 的使用方法及其常见问题的解决方法。

    4 年前
  • npm 包 sql2asciidoc 使用教程

    简介 在前端开发中，有时候需要将 SQL 文件转成 AsciiDoc 格式的文档，以便于分享和交流。要实现这个功能，我们可以使用 sql2asciidoc 这个 npm 包。

    4 年前
  • npm包sql2csv使用教程

    前言 随着数据分析的流程趋于成熟，数据导出的需求也越来越多，而对于前端工程师来说，将数据从数据库导出到csv文件并不是一件简单的事情。此时，我们可以使用sql2csv这个npm包。

    4 年前
  • npm 包 spread-iterable 使用教程

    npm 包 spread-iterable 是一个用于将可迭代对象转换为数组的工具。在前端开发中，我们经常会将可迭代对象转换为数组，以便对其进行操作。这个工具可以让这个过程更加简单和高效。

    4 年前
  • npm 包 sql2es 使用教程

    sql2es 是一个通用的 SQL 转 ElasticSearch 查询语句的 npm 包。本文将详细介绍该包的使用方法，包括安装、基本用法和高级用法等。 安装 可以通过 npm 包管理器进行安装： ...

    4 年前
  • npm 包 sql2ts 使用教程

    随着前端领域的不断发展，前端工具库也变得越来越强大，其中 npm 包是现代前端项目中不可或缺的一部分。而在前端开发过程中，我们经常需要和数据库打交道，因此，今天我要向大家介绍一款 npm 包：sql2...

    4 年前
  • npm 包 sql92-keywords 使用教程

    在前端开发中，我们经常需要操作数据库，并且需要书写 SQL 语句，而 SQL 语句中有一些关键字是不可以用作数据库中的字段名或表名，比如 SELECT, WHERE 等。

    4 年前
  • npm包sqlapi使用教程

    前言 如果你作为一个前端开发工程师，平时使用了大量的SQL语句，而且对自己在写的SQL语句中的条件行为，输入项是否正确没有把握，那么现在有一个非常棒的npm包能够解决你的所有问题——sqlapi! ...

    4 年前
  • npm 包 sqlbase 使用教程

    介绍 SQLBase 是一个基于 JavaScript 的轻量级 ORM 框架。它可以让你使用 JavaScript 语言来操作 SQLite 数据库，使得 JavaScript 开发者能够更高效地完...

    4 年前

相关推荐

    暂无文章