npm 包 redux-promises-concluder 使用教程

redux-promises-concluder 是一个 Redux 的中间件，用于在异步操作中处理多个 Promise，方便将多个 Promise 转化为一个结果作为 Redux 的数据。本文将介绍如何使用这个 npm 包。

安装

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

添加到 Redux 中

添加 redux-promises-concluder 中间件到 Redux 中需要进行如下步骤：

  1. 导入 redux-promises-concluder
------ ----------------- ---- ---------------------------
  1. 在创建 middleware 的时候添加 promisesConcluder
----- ---------- - ----------------
    ----------------- -- -- ----------------- ---
--
  1. 组合 middleware
----- ----- - ------------
    ------------
    -------------
    ----------
--

使用

redux-promises-concluder 将一个 Promise 序列转化为一个结果。这个结果通过对应的 Action 发送给 Redux，让你在消费某类 Promise 的时候保持代码的简洁。

在 Redux 中，我们定义的 Action 通常会指定一个 type，例如：

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

当用户发起登录时，我们创建一个请求 action：

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

登录成功时，我们创建一个成功 action：

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

登录失败时，我们创建一个失败 action：

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

一个登录流程中，有三个 Promise：

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

我们可以对这些 Promise 进行如下处理：

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

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

使用 redux-promises-concluder，我们可以将代码改为如下形式：

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

示例代码

下面是一个完整的例子：

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

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

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

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

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

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

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

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

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

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

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

总结

redux-promises-concluder 是一个非常实用的 Redux 中间件，在处理多个 Promise 的时候非常有用，将代码简化了很多。以上便是 npm 包 redux-promises-concluder 的使用教程，希望能对您有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 webpack-wizard 使用教程

    在前端开发中，构建工具是必不可少的。其中 Webpack 是一个常用的构建工具，能够将各种静态资源打包成为前端页面所需要的文件。 但是，使用 Webpack 的配置并不是很容易，需要一定的学习和经验。

    4 年前
  • npm 包 webpack-worker 使用教程

    webpack-worker 是一个使用 web worker 的 webpack 插件，它可以在 webpack 构建时使用 worker 进行代码的分析，从而提升构建效率。

    4 年前
  • npm 包 webpack-workspace 使用教程

    前言 在前端开发中，Webpack 是一个非常重要的工具，它可以将多个文件打包成一个文件，也可以对文件进行压缩、编译等操作。在使用 Webpack 的过程中，我们经常需要配置多个环境，例如开发环境、测...

    4 年前
  • npm 包 webpack-workspaces 使用教程

    什么是 webpack-workspaces Webpack-workspaces 是一个在 npm 包管理工具上面工作的 Webpack 插件，它的主要功能是针对 monorepo 相关的项目，将多...

    4 年前
  • npm 包 webcoin-bridge 使用教程

    介绍 webcoin-bridge 是一个用于在浏览器中使用比特币的 JavaScript 库，它是基于 webcoin 实现的。webcoin-bridge 通过连接一个远程比特币节点来提供创建比特...

    4 年前
  • npm 包 webcoin-params-terracoin 使用教程

    前言 npm 是 Node.js 的包管理器，可以方便地进行包管理，而 webcoin-params-terracoin 则是一款钱包服务，用于存储和管理数字资产，具有良好的安全性和可靠性。

    4 年前
  • npm 包 webcoin-terracoin 使用教程

    前言 npm 是 JavaScript 的包管理器，可以方便地在线安装、更新、删除 JavaScript 包。webcoin-terracoin 是一个 npm 包，它是一个用于生成和处理 Terra...

    4 年前
  • npm 包 webcolumns 使用教程

    本文将介绍一个实用的前端开发工具——webcolumns，它是一个基于 jQuery 的简单易用的网格布局插件。通过本文的介绍和学习，你将掌握 webcolumns 的使用技巧，进而提高你的前端开发效...

    4 年前
  • npm 包 Webley 使用教程

    Webley 是一个轻量级的前端库，它提供了诸如时间格式化、cookie 处理、DOM 操作等常用功能。Webley 可以通过 npm 包管理工具进行安装和使用。本篇文章将为您详细介绍如何使用 Web...

    4 年前
  • npm 包 weblib 使用教程

    在前端开发中，npm 包是开发者必备的工具之一。有了 npm 包，我们可以方便地管理和引入很多优秀的开源库，从而提高开发效率和代码质量。其中，weblib 是一款非常实用的 npm 包，本文将介绍如何...

    4 年前
  • npm 包 webcomponents-lite 使用教程

    前言 webcomponents-lite 是原生 Web Components 的一个轻量级 polyfill，它以 JavaScript 模块的形式提供，可以通过 NPM 引入到我们的前端工程项目...

    4 年前
  • npm 包 webpack-electron-connect-plugin 使用教程

    随着前端技术的进步，Electron 成为了开发桌面应用的热门选择。而 webpack 作为前端构建工具的代表，也被广泛应用在 Electron + React 开发中。

    4 年前
  • NPM 包 webpack-easy-config 使用教程

    前言 在前端工程化中，Webpack 是一款重要的工具。Webpack 的强大之处在于其高度可配置化，但是要想搭建一个高度可定制化的 Webpack 构建环境却需要学习大量的配置技巧，这对于一些初学者...

    4 年前
  • npm 包 webpack-electron-packager 使用教程

    简介 webpack-electron-packager 是一个基于 webpack 和 electron-packager 的 npm 包，它可以帮助我们将 web 应用程序打包成桌面应用程序。

    4 年前
  • npm 包 webpack-emit-stats-plugin 使用教程

    前端开发中，我们经常会使用 webpack 这样的模块打包工具来管理工程中的各个模块和资源文件。而 webpack-emit-stats-plugin 这个 npm 包则可以帮助我们更好地管理这些资源...

    4 年前
  • npm 包 webpack-entries 使用教程

    前言 在前端开发中，我们经常需要使用 webpack 作为构建工具来打包我们的代码，尤其是在大型项目中。webpack 可以根据入口文件（entry）来构建我们的项目，并生成多个 bundle 文件。

    4 年前
  • npm 包 webpack-entry-html-plugin 使用教程

    在 Web 开发中，前端工程化已经成为了必不可少的部分，对于前端工程化的工具，webpack 可以说是最受欢迎的。随着前端项目变得越来越复杂，webpack 的插件体系也越来越完善。

    4 年前
  • npm 包 webpack-entries-plugin 使用教程

    在前端开发中，Webpack 是一个非常重要的工具之一，它可以打包多个 JavaScript 模块，处理各种资源文件，使前端开发更加高效和便捷。而其中的 webpack-entries-plugin ...

    4 年前
  • npm 包 webpack-entry 使用教程

    随着前端应用的复杂度越来越高，模块化打包成为了前端工程化的必要技能。而 webpack 是目前前端最常用的模块化打包工具之一。然而，在实际项目中，尤其是多页面应用的情况下，如何管理多个页面的入口文件，...

    4 年前
  • npm 包 weblo 使用教程

    Weblo 是一个基于 Node.js 的开源 Web 框架，它具有高度的易用性、稳定性和灵活性。它采用了类 Flask 的路由解析方式，同时支持基于异步的控制器和视图的编程。

    4 年前

相关推荐

    暂无文章