npm 包 promise-redux-simple 使用教程

在 Web 开发中，无论是前端还是后端，数据管理和状态管理都是非常重要的一环。而在前端领域，Redux 是一种非常流行的状态管理框架，提供了一种可预测的状态管理方案，得到了众多开发者的青睐。在 Redux 中，使用异步操作通常会用到 Redux-Thunk 中间件，而在使用 Redux-Thunk 的过程中，Promise 也是我们不可忽视的一部分。那么本文将针对如何利用 npm 包 promise-redux-simple 简化 Redux-Thunk 中间件的使用，提供详细的使用教程。

promise-redux-simple 简介

promise-redux-simple 是一个针对 Redux-Thunk 中间件做出封装的 npm 包，它能够很好地简化 Redux-Thunk 的使用，提供更加友好的 API 和更加易读的 Action Creator。 具体来说，它包含两部分内容：

  • createPromiseThunk函数：它能够让我们更加方便地创建 Redux-Thunk 函数

  • promiseDispatchMiddleware 中间件：它能够将 Promise 封装为 Redux-Thunk 函数并自动 dispatch

promise-redux-simple 的安装和使用

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

promise-redux-simple 中的两个核心 API 分别是 createPromiseThunk 和 promiseDispatchMiddleware。

createPromiseThunk

createPromiseThunk 是一个工厂函数，它的作用是根据不同的 promise 返回不同的 Thunk 函数。它的基本格式如下：

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

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

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

使用 createPromiseThunk 函数的方式是通过调用它创建出我们需要的 Action Creator，这个函数需要两个参数：type 和 promiseCreator。

  • type：用于标识这个 Action Creator 的类型，作为后续 dispatch 的参数之一。
  • promiseCreator：一个返回 Promise 的函数，它的参数是 Action Creator 的参数。

举个例子，假设我们现在在写一个获取 GitHub 的用户信息的应用，那么我们需要获取用户信息的 API 接口是这样的：

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

如果我们直接使用的话，那么可能需要这样写一个典型的 Thunk action 构造函数：

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

但是，如果我们使用 createPromiseThunk 函数，这个代码就变得非常简洁：

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

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

其中 FETCH_GITHUB_USER 通常是一个常量，被用于网络请求的状态管理，具有如下作用：

  • 便于后续 dispatch，因为它是 action 的 type 字段
  • 可以定义成功和失败的场景

createPromiseThunk 实现中可以通过闭包保存这个 type 信息，在返回的函数中自动完成了 dispatch 操作。当成功时，它会自动将结果放入 payload，status 放入 action 中，当失败时，自动将错误信息放入 payload，status 放入 action 中。我们不需要再手动编写 Thunk 函数。

使用起来非常方便，且代码简洁。

promiseDispatchMiddleware

promiseDispatchMiddleware 是一个自动转换 Promise 到 Thunk action 的中间件，减少 action 创建器的开销。它的作用是封装 Redux-Thunk 中间件，自动将 Promise 进行转换并自动 dispatch。我们可以很方便地在 redux 的 createStore 函数中使用它。

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

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

这个中间件会在接收到 Promise 时帮助我们转换为对应的 Thunk action 并自动 dispatch。并且，能够自动处理 Promise 的状态，实现 loading 状态管理。可以将 Promise 直接交给 reducer 处理，从而可以在组件中展示 loading 状态，而不需要特意编写 Thunk action。

promise-redux-simple 的示例代码

下面是一个 promise-redux-simple 简单使用的示例，我们以获取 GitHub 用户信息的 API 为例：

Step1. 安装 promise-redux-simple 包

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

Step2. 配置我们的 Reducer

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

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

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

Step3. 编写 action

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

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

Step4. Store.ts

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

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

Step5. 组件中使用

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

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

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

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

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

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

至此，完成了 promise-redux-simple 实用技巧的介绍及示例代码。

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

阅读全文

猜你喜欢

  • npm 包 react_native_log_entries 使用教程

    前言 作为前端开发者，我们经常需要调试我们的代码以查找错误。当我们的应用程序变得复杂时，可能需要打印大量数据以理解应用程序的状态。然而，在移动设备上查看应用程序日志并不是一件容易的事情。

    2 年前
  • npm 包 askjs 使用教程

    介绍 askjs 是一个基于 Node.js 的 npm 包，用于简化用户通过命令行交互式方式进行输入的操作，使用户可以通过简单的命令行提示，快速、准确地输入所需要的信息。

    2 年前
  • npm 包 social-share-services 使用教程

    介绍 social-share-services 是一个方便快捷的前端社交分享包，它可以让开发者轻松集成各种社交分享功能到自己的网站或应用中。该包依赖于 Bootstrap 和 jQuery。

    2 年前
  • npm 包 homebridge-trackpin 使用教程

    Homebridge 是一个模拟 Apple HomeKit 平台的开源项目，可以将多种不同的智能设备接入 Apple HomeKit 平台中。Homebridge 支持许多官方和非官方的插件，可以将...

    2 年前
  • npm 包 kkstab 使用教程

    1. 简介 kkstab 是一款基于 JavaScript 的轻量级、易用的组件库，能够帮助开发者快速构建 Web 应用的选项卡功能。其被发布到 npm 上，并支持 webpack 的引入方式，能够方...

    2 年前
  • npm 包 stylelint-no-multiple-top-level-modules 使用教程

    在前端开发中，我们通常会使用众多的第三方库和框架来帮助我们更快、更高效地完成我们的项目。而这些第三方库和框架通常会伴随着大量的样式文件，如果这些样式文件中存在大量的顶层模块（即多个文件中存在相同的 C...

    2 年前
  • npm 包 atscntrb-bucs320-mergesort 使用教程

    前言 在进行数据处理时，排序算法是一个重要的工具。在前端开发中，我们常常需要对数据进行排序来优化用户体验或实现某些功能。而 npm 包 atscntrb-bucs320-mergesort 就是一个常...

    2 年前
  • npm 包 mustache-dictionary 使用教程

    简介 Mustache-dictionary 是一款基于 Mustache 模板语法的数据绑定工具，可以将数据对象和 Mustache 模板混合，生成最终的 HTML。

    2 年前
  • npm 包 shape-db 使用教程

    概述 在前端开发中，我们不可避免地需要处理和管理数据。npm 包 shape-db 是一个轻量级的数据库库，可以帮助开发者快速创建、读取和更新数据库。 在此教程中，我们将学习如何使用 shape-db...

    2 年前
  • npm 包 sync-github-forks 使用教程

    sync-github-forks 是一个 npm 包，用于同步 Github 仓库的 fork 到本地。在前端开发中，我们常常需要使用别人的库，并通过 fork 进行了一些修改，如果原库进行了更新...

    2 年前
  • npm 包 trace-inline 使用教程

    在前端开发中，我们经常需要 debug 和分析代码的执行速度、堆栈信息、函数调用等信息。此时可以使用 Chrome 开发者工具中的 console.trace()，但有时候我们需要更加详细和灵活的信息...

    2 年前
  • npm 包 ts-cloneable-generator 使用教程

    概述 ts-cloneable-generator 是一个可以帮助你快速生成 TypeScript 可克隆类和接口的库。它可以非常方便地创建支持克隆和深度克隆的 TypeScript 类和接口，减少重...

    2 年前
  • npm 包 vue-offcanvas-simple 使用教程

    前言 在前端开发中，实现侧边栏（侧边菜单）是非常常见的需求。而 vue-offcanvas-simple 是一个基于 Vue.js 实现的简单易用的侧边栏组件。本篇文章将详细介绍 npm 包 vue-...

    2 年前
  • npm 包 @barraponto/markdown-to-json 使用教程

    简介 @barraponto/markdown-to-json 是一个 Node.js 的 npm 包，它可以将 Markdown 格式的文本转化为 JSON 格式，方便在前端项目中使用。

    2 年前
  • npm 包 dpd-sendgrid 使用教程

    简介 dpd-sendgrid 是一个 Node.js 的 npm 包，它将 SendGrid API 封装为 Restful API，并提供了相关的配置和使用方法供开发人员使用。

    2 年前
  • NPM 包 PLH 使用教程

    前言 在前端开发中，我们经常需要使用占位符来填充一些文本内容，特别是在页面设计中。而通常情况下我们使用一些占位符生成器来生成随机的占位符。PLH 就是一款非常方便快捷的 NPM 包，可以帮助我们生成各...

    2 年前
  • npm 包 garen-weather 使用教程

    介绍 npm 包 garen-weather 是一个可以获取天气数据的 JavaScript 插件。它可以通过城市名称或经纬度来获取对应城市的实时天气数据，并提供了丰富的天气信息，比如温度、湿度、气压...

    2 年前
  • npm 包 slush-ppp-generator 使用教程

    随着前端工程化的发展，一些快速构建工具也应运而生。其中，slush 是一款基于 Gulp 的快速前端项目构建工具，它能够帮助我们更加高效地构建前端项目。本文将介绍一款适用于 slush 的 npm 包...

    2 年前
  • 前端开发中的必备工具：npm 包 generator-dmg 使用教程

    随着前端技术的不断发展和提升，我们需要一个高效的工具来进行软件打包和发布。而在 macOS 操作系统下，dmg 文件尤其常见，因此有必要学习如何使用 npm 包 generator-dmg 这一工具来...

    2 年前
  • npm 包 gulp-js-replace 使用教程

    在前端开发中，我们经常需要对 JavaScript 文件进行一些操作，如替换文件内容、添加注释、去除 console.log 等。为了解决这些问题，我们可以使用 gulp-js-replace 包来帮...

    2 年前

相关推荐

    暂无文章