在 React/Redux 中实现全局 Loading

在前端开发中，我们经常需要在页面加载或者进行异步操作时显示 Loading 状态，来提醒用户页面正在加载中，防止用户误操作。在 React/Redux 中，我们可以通过实现全局 Loading 组件来实现这一功能，本文将介绍如何实现全局 Loading 组件。

实现思路

我们可以通过 Redux 中间件来实现全局 Loading，具体思路如下：

  1. 创建一个 loading reducer，用来管理 Loading 状态。
  2. 创建一个 showLoading action，用来触发显示 Loading。
  3. 创建一个 hideLoading action，用来触发隐藏 Loading。
  4. 创建一个 loadingMiddleware 中间件，用来监听所有的异步操作，当异步操作开始时，触发 showLoading action，当异步操作结束时，触发 hideLoading action。

实现步骤

1. 创建 loading reducer

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

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

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

2. 创建 showLoading action

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

3. 创建 hideLoading action

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

4. 创建 loadingMiddleware 中间件

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

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

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

5. 在 store 中使用 loadingMiddleware

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

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

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

6. 创建 Loading 组件

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

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

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

7. 在页面中使用 Loading 组件

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

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

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

总结

通过实现全局 Loading 组件，我们可以在 React/Redux 应用中方便地显示 Loading 状态，提升用户体验。本文介绍了具体实现步骤，希望对大家有所帮助。

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

阅读全文

猜你喜欢

  • 如何在 Mocha 中测试 TypeScript 代码

    Mocha 是一个流行的 JavaScript 测试框架，可以用于测试前端和后端代码。但是，如果你正在使用 TypeScript 编写代码，你可能会遇到一些问题。在本文中，我们将介绍如何在 Mocha...

    1 年前
  • 使用 SSE 与 WebSocket 进行实时通信的比较

    在现代 Web 开发中，实时通信已经变得越来越重要。SSE（Server-Sent Events）和 WebSocket 都是实现实时通信的常见方式。虽然它们都可以实现实时通信，但是它们的实现方式和适...

    1 年前
  • MongoDB 中如何使用 $set 进行数据更新

    MongoDB 是一种流行的 NoSQL 数据库，它提供了丰富的功能和灵活的数据模型，使得它成为许多应用程序的首选数据库。在 MongoDB 中，我们可以使用 $set 操作符对文档进行更新，本文将详...

    1 年前
  • RESTful API 中的身份认证：使用 Token

    在现代 Web 开发中，RESTful API 是一种常见的 API 设计风格，它使用 HTTP 协议来实现数据的传输和操作。在使用 RESTful API 时，需要进行身份认证来确保数据的安全性。

    1 年前
  • Node.js 实现高效可靠的消息队列及其应用

    前言 在当今大数据时代，消息队列的应用越来越广泛，其主要作用是解耦生产者和消费者，提高系统的可靠性和扩展性。Node.js 作为一种快速、高效的服务器端语言，也有着非常优秀的消息队列实现。

    1 年前
  • Koa 的 Logger 中间件配置详解

    介绍 Koa 是一个轻量级的 Node.js web 框架，它使用异步流程控制来提高性能和可读性。Koa 提供了一个中间件机制，允许开发者在请求处理过程中添加自定义的功能。

    1 年前
  • PWA 如何实现客户端数据存储？

    前言 在 PWA（Progressive Web App）中，客户端数据存储是一个非常重要的话题。因为 PWA 通常需要离线访问，而客户端数据存储可以让我们在离线状态下也能够访问数据。

    1 年前
  • CSS Grid 如何避免内容溢出？

    CSS Grid 是一种强大的布局系统，它可以让我们轻松地创建复杂的网格布局。但是，当网格中的内容太多时，就会出现内容溢出的问题。本文将介绍如何使用 CSS Grid 避免内容溢出的问题。

    1 年前
  • 使用 ES6 的 Proxy 对象监控 JavaScript 对象的变化

    JavaScript 中的对象是非常重要的一部分，我们经常需要对其进行操作和修改。然而，在某些情况下，我们需要在对象发生变化时进行一些额外的操作或者进行一些限制。在这种情况下，ES6 的 Proxy ...

    1 年前
  • Fastify 如何实现在线文档 API

    前言 在开发前端应用时，我们通常需要调用后端提供的API接口。而API接口的文档是我们了解接口功能和参数的重要参考。Fastify是一款高效、低开销的Web框架，它提供了一种简单的方式来生成在线接口文...

    1 年前
  • 使用 Chai-Almost 示例测试不同的测试场景

    在前端开发中，测试是非常重要的一环。而在测试中，我们需要对不同的场景进行测试，以保证代码的质量和稳定性。本文将介绍如何使用 Chai-Almost 示例测试不同的测试场景。

    1 年前
  • 如何在 Redux 中使用 RxJS 以优雅的方式进行管理

    在前端开发中，Redux 是一个非常流行的状态管理库，它可以帮助我们更好地组织和管理应用程序的状态。但是，在处理异步操作和副作用时，Redux 并不是最优解决方案。

    1 年前
  • ECMAScript 2017 中字符串拆分技巧及 String.prototype.split() 方法的使用

    在前端开发中，字符串拆分是一个非常常见的操作。ECMAScript 2017 引入了一些新的字符串拆分技巧，同时 String.prototype.split() 方法也是处理字符串拆分的重要方法。

    1 年前
  • Serverless 架构下如何利用 API Gateway 搭建 RPC 服务

    在 Serverless 架构下，API Gateway 是一种非常常见的服务，可以用来管理和调度函数服务。除了作为 RESTful API 的网关，API Gateway 还可以用来搭建 RPC 服...

    1 年前
  • 如何在 LESS 中使用 CSS3 的 border-radius 特性

    前言 CSS3 的 border-radius 特性可以为元素的边框添加圆角，使得页面看起来更加美观和流畅。在 LESS 中，我们可以使用 mixin 和变量来方便地使用这一特性。

    1 年前
  • Flexbox 布局下找回国内电商垂直居中的常见解决方案

    在国内电商网站中，我们经常会遇到需要垂直居中的场景，比如商品列表、购物车、订单详情等等。而在传统的 CSS 布局中，实现垂直居中往往需要使用一些比较 hack 的方式，使得代码可读性和维护性都不太好。

    1 年前
  • SASS 的 mixin 用法及实例解析

    在前端开发中，CSS 是不可或缺的一部分。然而，CSS 的编写方式有时让人感到繁琐和难以维护。为了解决这个问题，SASS 的 mixin 功能被广泛应用。 什么是 mixin Mixin 是 Sass...

    1 年前
  • Sequelize 在 Node.js 项目中的最佳实践

    Sequelize 是一个流行的 Node.js ORM 框架，它可以帮助开发者更轻松地管理数据库。在本文中，我们将介绍 Sequelize 在 Node.js 项目中的最佳实践，包括如何安装、配置、...

    1 年前
  • PM2 与 Docker：如何将它们结合使用？

    在现代的 Web 开发中，容器化技术和进程管理工具已经成为了必要的工具。Docker 是一款流行的容器化解决方案，而 PM2 是一款强大的进程管理工具。在本文中，我们将探讨如何将这两个工具结合起来，以...

    1 年前
  • ES10 中 Object.getOwnPropertyDescriptors() 方法详解

    在 ES10 中，新增了一个 Object.getOwnPropertyDescriptors() 方法，它可以获取一个对象所有属性的描述符。本文将详细介绍这个方法的用法、意义和示例代码。

    1 年前

相关推荐

    暂无文章