npm 包 redux-promise-thunk 使用教程

redux-promise-thunk 是一个用于处理异步操作的 Redux 中间件。它以 Promise 为基础，支持基于 Promise 的异步操作，并且对于多级嵌套的异步操作也能够有效处理。本文将详细介绍 redux-promise-thunk 的使用方法，并通过实例代码讲述 Redux 中如何使用这个中间件。

安装

使用 npm 安装 redux-promise-thunk：

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

引入

在 Redux 应用中引入 redux-promise-thunk，并在 store 中使用：

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

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

其中，createPromiseThunk() 函数用于创建 Promise-based 的 thunk。因为 redux-thunk 已经提供了基于函数的 thunk，所以需要用到两个中间件：thunkMiddleware 和 createPromiseThunk()。

使用

使用 redux-promise-thunk 中的 Promise-based 的 thunk，需要将 action creator 改造成返回 Promise。例如：

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

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

以上代码中，getTodoList 函数接受 dispatch 和 getState 作为参数，并异步调用返回一个 Promise。在 dispatch 中发起 LOAD_TODO_LIST_REQUEST 的 action，表示开始加载，然后在成功或失败后分别 dispatch LOAD_TODO_LIST_SUCCESS 或 LOAD_TODO_LIST_FAILURE 的 action。这个函数可以直接放在组件中 dispatch 调用，也可以放在 mapDispatchToProps 中将它转化成 props。以 mapDispatchToProps 为例：

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

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

以上使用 bindActionCreators 将 getTodoList 转成了 props.actions.getTodoList 函数，然后在组件中就可以直接使用 props.actions.getTodoList() 调用。

注意事项

使用 redux-promise-thunk 时需要注意以下几点：

  1. 在 action creator 中需要返回 Promise，以便中间件识别。

  2. Redux 中间件的顺序需要先应用 thunkMiddleware，后应用 createPromiseThunk()。因为 thunkMiddleware 能够处理返回函数的 action creator，而 createPromiseThunk() 只能处理返回 Promise 的 action creator，因此需要先执行 thunkMiddleware。

  3. Promise-based thunk 的执行顺序与 Promise 的执行顺序有关，如果需要按顺序执行多个 Promise，可以使用 async/await 等 Promise 处理方式。

示例代码

一个简单的待办事项 Redux 应用，使用 redux-promise-thunk 来处理异步操作的示例代码：

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

通过 redux-promise-thunk，我们可以方便地处理 Redux 应用中的异步操作。它的基于 Promise 的 thunk 方式让我们不再需要手动处理异步 action 的 dispatch 顺序，同时还提供了错误处理等功能。当然，使用 redux-promise-thunk 也有注意事项需要遵守。我们需要确保返回的 action creator 返回一个 Promise，中间件的顺序需要正确，同时，Promise 的执行顺序需要注意。我们使用一个简单的待办事项应用作为例子，演示了如何使用 redux-promise-thunk 编写 Redux 应用。希望这篇文章能够帮助你理解和使用 redux-promise-thunk。

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

阅读全文

猜你喜欢

  • NPM 包 sshync 使用教程

    sshync 是一个基于 SSH 协议的文件同步工具。它可以帮助前端工程师快速、方便地将本地代码同步到远程服务器。它的操作简单易懂，功能强大，非常适合用于前端云端开发和部署。

    4 年前
  • npm 包 srcds-logs 使用教程

    npm 包 srcds-logs 是一个针对源引擎游戏服务器的日志解析工具，该工具可以解析源引擎游戏服务器的日志文件，并提取出有用的信息。该工具可以帮助服务器管理员更加方便地管理游戏服务器，同时也可以...

    4 年前
  • npm 包 srcgen 使用教程

    在前端开发中，代码生成工具是一个必不可少的利器。而 npm 包 srcgen 就是一个功能强大的代码生成工具，它可以让你更加高效地生成代码、模板和文档。在本文中，我们将介绍 srcgen 的使用教程，...

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

    前言 在前端开发中，我们经常需要使用一些静态网页，如纯 HTML 或者 HTML + CSS。而对于这种网页，如果需要使用一些动态功能，比如说引用公共头部、尾部或者侧边栏等等，那么就需要用到 SSI（...

    4 年前
  • npm 包 srcgrep 使用教程

    介绍 srcgrep是一个非常方便的npm包，可以帮助我们在代码库中查找特定的文本或正则表达式匹配项。无论从何处查找，包括源代码，配置文件或其他文档和存储库，其支持我们以非常易于使用和一致的方式快速查...

    4 年前
  • npm 包 ssi-http-parser 使用教程

    前言 在前端开发中，我们常常需要处理数据流，并且处理数据流的一种常见方式是使用 http。当我们需要从服务器端获取数据时，我们通常会使用 http 协议来请求数据。

    4 年前
  • NPM 包 SSI-CLI 使用教程

    SSI-CLI 是一个基于 Node.js 开发的命令行工具，用于在静态 HTML 文件中嵌入 Server Side Includes (SSI)。SSI 指令可用于在 Web 服务器上动态地生成 ...

    4 年前
  • npm 包 ssi-parser 使用教程

    如果你是一名前端工程师，可能会遇到需要在页面中使用 SSI (Server Side Includes) 语法实现代码复用或者其他功能的情况。而 ssi-parser 就是一个 npm 包，它能够帮助...

    4 年前
  • sqs-pipeline-lambda-receiver

    Reveiver module for sqs data pipelines sqs-pipeline-lambda-receiver Sender module for sqs data pipel...

    4 年前
  • npm包sqs-pipeline-lambda-reciever使用教程

    在云服务领域，AWS SQS是一个被广泛使用的消息队列服务，它可以帮助我们为分布式应用程序解耦消息处理的过程。但是，为了将消息处理到Lambda函数中，我们需要编写一些代码来驱动SQS并触发Lambd...

    4 年前
  • npm 包 sprite.styl 使用教程

    前言 对于前端工程师而言，实现网页元素雪碧图是必要的技能之一。但手动合并图片，生成 sprite 图片及对应的 CSS 样式表也是一项繁琐的工作。通过使用 npm 包 sprite.styl，可以在前...

    4 年前
  • npm 包 spritegen-sheets 使用教程

    介绍 在前端开发中，制作雪碧图是很常见的任务，它能够降低网站的 HTTP 请求数量，从而提升网站性能。而在制作雪碧图时，我们可以利用 npm 包 spritegen-sheets，实现自动的雪碧图生成...

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

    在前端开发中，日志的收集和管理是非常重要的一项工作。在开发过程中，我们通常需要记录系统错误和用户操作行为等事件，以便后续的问题排查和数据统计。通过 npm 包 sqs-logger，我们可以很方便地实...

    4 年前
  • npm 包 spritefont 使用教程

    简介 Spritefont 是一个 npm 包，它可以将文本转换成可以在 canvas 中绘制的图像。它使用了基于纹理的字体技术，可以让你的网页更加专业和优雅。 在本文中，我们将会详细介绍如何使用这个...

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

    npm 提供了许多有用的包来简化前端开发。其中一个非常有用的包是 sqs-mv。这个包可以帮助开发者在前端中实现滑动移动效果，非常实用。本教程将介绍如何使用 sqs-mv 包。

    4 年前
  • npm 包 sqs-pipeline-lambda-intermediator 使用教程

    什么是 sqs-pipeline-lambda-intermediator？ sqs-pipeline-lambda-intermediator 是一个 Node.js 模块，它可以帮助开发者快速创建...

    4 年前
  • npm 包 sqs-pipeline-lamda-intermediator 使用教程

    在 serverless 架构中，一般通过消息队列和异步服务来处理一些任务，以减轻系统负担和提高性能。AWS SQS 是 Amazon 提供的一种消息队列服务，可以很好地和 Lambda 函数配合使用...

    4 年前
  • npm 包 sqs-pipeline-lambda-sender 使用教程

    前言 在开发前端项目中，我们可能会用到一些后台服务来完成数据处理等功能。而在这些服务之间传输数据时，我们需要一种高效而可靠的消息队列来进行连接、交互和更新。AWS SQS 算是一种方便而强大的消息队列...

    4 年前
  • npm 包 sqs-pipeline-lambda-receiver 使用教程

    随着云服务的发展，越来越多的公司开始将其应用程序部署到 AWS 上。AWS 提供了一系列强大的工具和服务，使得开发者可以以更高效，更简单的方式来部署应用程序。在这里，我们将介绍一个npm 包 sqs-...

    4 年前
  • npm 包 sqs-pipeline-lamda-sender 使用教程

    sqs-pipeline-lamda-sender 是一个 npm 包，它提供了一个方便的 Amazon SQS 管道和 Lambda 函数使用发送消息的工具。这篇文章将会教会你如何使用该 npm 包...

    4 年前

相关推荐

    暂无文章