npm 包 redux-promise-track 使用教程

简介

redux-promise-track 是一个 Redux 中间件，可以帮助开发者跟踪解决 Redux thunk 代码中的 promise 操作，并生成 action 以表明它们何时开始和完成。

安装

使用 npm 安装：

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

快速开始

  1. 在 Redux store 的 middleware 链中引入该中间件：
------ - ------------ --------------- - ---- --------
------ ----------------- ---- ----------------------

----- ----- - ------------
  --------
  ----------------------------------
--
  1. 创建类型为 promise 的 action：
----- --------- - -- -- -
  ------ -
    ----- -------------
    -------- --------------------
  --
--
  1. 对于其它类型的 action，需要手动添加 meta 属性来启用 promise 跟踪：
----- ---------- - ------ -- -
  ------ -
    ----- --------------
    -------- --------------------- ------
    ----- -
      -------- ----
    -
  --
--
  1. 添加一个处理 action 的 reducer：
----- ----------- - ------ - --- ------- -- -
  ------------------- -
    ---- ---------------------
      -- -- ------- -----
      ------ ------
    ---- -----------------------
      -- -- -----
      ------ --------------------
    ---- ----------------------
      -- ------
      ------ ------
    -- -- ------
    --------
      ------ ------
  -
--

额外功能

redux-promise-track 可以通过在 action 对象的 meta 属性中添加 onPending, onFulfilled 和 onRejected 以在 promise 完成后进行额外的处理。

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

示例代码

下面是一个完整的 Redux 应用示例代码：

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

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

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

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

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

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

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

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

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

总结

通过了解使用 redux-promise-track 这个 npm 包的方法，我们可以轻松地追踪并限制 Redux thunk 的 promise 操作，并使我们的代码更可靠。谢谢关注本文，希望对你有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 sprite-cli 使用教程

    前言 在前端开发中，我们经常需要使用雪碧图来优化网站或应用的性能和体验，而 sprite-cli 就是一个让我们可以更快速、更方便地生成雪碧图的命令行工具。本文将带领大家深入了解 sprite-cli...

    4 年前
  • npm 包 sprite-brunch-localvox 使用教程

    在前端开发中，我们常常需要优化网页的性能和加载速度，其中一个方案就是使用 CSS sprite 技术。 CSS sprite 技术可以减少网页的 HTTP 请求次数，从而提高网页的加载速度。

    4 年前
  • npm 包 sprite-anim 使用教程

    前言 在前端开发中，Spritesheet 技术是将多张小图片组合成一张大图，再通过 CSS 变化来展示不同的部分从而实现动画效果的一种技术。在这样的技术中，我们使用 sprite-anim 库可以更...

    4 年前
  • npm 包 sprite-css 使用教程

    在 Web 开发中，CSS sprite 技术可以用来处理图片合并和优化，从而提高页面的渲染速度和性能。然而，手动实现 CSS sprite 并不是一件容易的事情。

    4 年前
  • npm包sqrt使用教程

    在前端开发中，我们经常会用到一些数学计算的操作，包括求平方根。而这个时候，我们就可以使用一个 npm 包叫做 sqrt。这个包可以帮助我们方便地进行平方根计算，它非常易用。

    4 年前
  • npm 包 sqrt-arbitrary-precision 使用教程

    介绍 sqrt-arbitrary-precision 是一个基于 JavaScript 的 npm 包，可以用来解决小数精度问题，并实现开根号计算。使用该包，可以避免浮点数在计算机中二进制表示精度限...

    4 年前
  • npm 包 sprite-extractor 使用教程

    在前端开发中，我们经常需要将多张小图片合并成一张大图，这种操作通常被称为“雪碧图”（sprite）。手动制作一张雪碧图会比较繁琐，而使用 npm 包 sprite-extractor 可以轻松地完成这...

    4 年前
  • npm包sqs使用教程

    介绍 在前端和后端开发中，处理队列的需求很常见。SQS (Simple Queue Service)是Amazon提供的一个队列服务，可以用来处理消息和任务。 npm包sqs是一个用于连接Amazon...

    4 年前
  • npm 包 sqs-abstraction 使用教程

    什么是 sqs-abstraction sqs-abstraction 是一个使用 Node.js 开发的 npm 包，旨在让开发者更方便地使用 AWS SQS（Amazon Simple Queue...

    4 年前
  • npm 包 sqlmigrate 使用教程

    前言 在开发 Web 应用时，数据库是必不可少的。而随着应用规模的不断扩大，数据库的表越来越多，数据库版本也随之增加，面对这种情况如何管理数据库变得尤为重要。 sqlmigrate 是一个基于 Nod...

    4 年前
  • npm 包 sqs-admin 使用教程

    简介 sqs-admin 是一款基于 Node.js 和 AWS SDK 开发的 npm 包，用于管理 Amazon SQS（简单消息队列服务）的队列、消息、消息接收器和消息发送器。

    4 年前
  • npm 包 src2qiniu 使用教程

    随着前端开发的日益发展，越来越多的开发者开始在前端实现一些具有一定复杂度的功能。其中，图片上传功能是前端开发中比较普遍的一个需求。在实现图片上传功能时，许多开发者会选择使用七牛云存储来进行图片存储和管...

    4 年前
  • npm 包 srccon-brief 使用教程

    npm 包 srccon-brief 使用教程 简介 srccon-brief 是一款前端开发常用的 npm 包，它可以生成一个项目的文档概要，方便团队成员了解项目的总体情况。

    4 年前
  • npm包sshrun使用教程

    前言 在前端开发过程中，我们经常需要操作Linux服务器。SSH连接是最常见的方式，但是频繁地输入复杂的SSH命令会让我们感到繁琐。于是，SSH连接工具就应运而生。

    4 年前
  • npm 包 SSHp 使用教程

    SSHp 是一个 npm 包，它提供了一些有用的功能，比如 SSH 连接以及执行远程命令等，让开发者可以方便地远程控制 Linux 服务器等。本篇文章将教你如何使用 SSHp 包，包括安装、配置以及一...

    4 年前
  • npm 包 sshout 使用教程

    前言 现在，越来越多的前端工程师习惯使用前端技术解决后端问题。SSH（Secure Shell）是一种加密网络协议，用于在网络中安全地获取远程计算机上的命令行接口。

    4 年前
  • npm 包 sqs-batch 使用教程

    Amazon Simple Queue Service（SQS）是 AWS 提供的一种高可扩展、全托管的消息队列服务。在前端应用中，我们经常需要使用 SQS 来进行消息的异步处理，例如发送邮件、进行计...

    4 年前
  • npm 包 sqs-clean 使用教程

    前言 AWS 提供了 SQS（Simple Queue Service）作为一种消息服务。SQS 使得应用可以分离消息产生者和消费者，让应用在解耦、弹性和可靠性方面变得更加灵活。

    4 年前
  • npm 包 sqs-ecs-jobs 使用教程

    简介 sqs-ecs-jobs 是一个使用 AWS Simple Queue Service（SQS）和 Amazon Elastic Container Service（ECS）的 npm 包，可以...

    4 年前
  • npm 包 sqs-jade 使用教程

    前言 随着前端开发的发展，我们常常需要处理大量的 HTML 模板文件，而为每一个模板文件都手写 HTML 可能会比较麻烦和耗时。这时我们就需要一种快速地生成 HTML 的方式，这就是通过模板引擎来实现...

    4 年前

相关推荐

    暂无文章