npm 包 redux-thunk-async 使用教程

Redux 是一个 JavaScript 状态容器，它使我们可以方便的管理应用的所有状态。但是，当你使用 Redux 发送异步请求时，你会发现 Redux 原生并不支持异步操作。这时候，为了解决这个问题，我们可以使用 redux-thunk-async 这个 npm 包来帮助我们实现异步操作。

简介

redux-thunk-async 是一个 Redux 中间件，它支持在 action 中返回一个函数，而不是一个普通的 action 对象。这个函数可以异步的操作网络请求等副作用，最后再发出真正的 action。

安装

你可以使用 npm 或 yarn 来安装 redux-thunk-async。

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

或者，

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

用法

首先，在你的 createStore 中添加 redux-thunk-async 中间件：

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

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

接下来，在 action 中返回一个函数：

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

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

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

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

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

上面的示例代码中，fetchUsers 这个 action 返回了一个函数，在函数中进行了网络请求，并且在成功或失败的情况下 dispatch 相应的 action。

示例代码

下面是一个完整的示例代码，它演示了如何使用 redux-thunk-async 进行异步请求：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在上面的示例代码中，我们使用了 connect 函数将 Redux 的 state 和 action 映射到了组件的 props 中，并且在组件的 useEffect 中调用了 fetchUsers action 来获取数据并展示出来。

总结

在 Redux 中发送异步请求，我们可以使用 middleware（如：redux-thunk-async）来支持异步操作。redux-thunk-async 允许我们在 action 中返回一个函数，函数可以异步的操作网络请求等副作用，并在完成这些异步操作之后再发出真正的 action。这个库使我们的代码更易读，更易维护。

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

阅读全文

猜你喜欢

  • npm 包 splitify 使用教程

    在开发前端网页时，我们经常需要对字符串进行拆分和组合。而在 Node.js 和 React 等前端框架中，我们可以使用 npm 包来方便地进行字符串操作。其中，splitify 就是一款非常实用的 n...

    4 年前
  • NPM包splitlessify的使用教程

    随着前端技术的发展，前端开发人员经常需要使用各种NPM包来提高工作效率。splitlessify是一个功能强大的NPM包，它可以帮助我们快速地将大型JavaScript代码库中的文件分割成更小、更适合...

    4 年前
  • npm 包 splitjs 使用教程

    前言 在前端开发中，有时候需要将一个页面分割成两个独立的部分，比如实现一个可拖拽的列表，左侧为列表，右侧为详细信息。你可能会想到使用 iframe 元素来实现，但这种方式会导致各种问题，如样式的不同步...

    4 年前
  • npm 包 splitpdf 使用教程

    Splitpdf 是一个非常方便的 npm 包，可以将 PDF 文件拆分成多个文件。在前端开发中，有时候需要将一个较大的 PDF 文件分成多个小文件，这时候 Splitpdf 就能派上用场。

    4 年前
  • npm 包 splitray 使用教程

    在前端开发中，我们经常需要对一些字符串进行拆分操作，splitray 就是一款能够帮助我们快速解决这一问题的 npm 包，下面将详细介绍如何使用该 npm 包，帮助大家更好地进行前端开发。

    4 年前
  • npm 包 Splitting 使用教程

    在前端开发中，工程师们经常会遇到需要在页面中动态加载多个 JS 文件的情况。尤其是在处理复杂的单页面应用（SPA）时，这种情况尤为常见。要解决这个问题，您可以使用 npm 包 Splitting。

    4 年前
  • npm包sql-mapper-cache-lru使用教程

    在前端开发中，我们常常需要对数据库进行操作，而这些操作中，SQL语句的构造是必不可少的一个过程。为了提高效率，我们可以使用npm包sql-mapper-cache-lru来加快SQL语句构造的速度和缓...

    4 年前
  • npm 包 sql-mapper-pagination 使用教程

    简介 在 Web 开发中，对于大量数据的查询和呈现，我们经常会用到分页功能。在数据库层面，也经常使用 LIMIT 和 OFFSET 语句来实现分页查询。但是，在前端开发中，我们通常需要使用一些工具库来...

    4 年前
  • npm 包 sql-model 使用教程

    在前端开发中，经常需要与后端数据库进行交互。而 SQL 是访问关系型数据库的标准语言，对于与关系型数据库打交道的前端开发者来说，SQL 是必备的技能之一。在本文中，我们将介绍如何使用 npm 包 sq...

    4 年前
  • npm 包 sql-minify 使用教程

    介绍 sql-minify 是一个用于压缩 SQL 语句并移除空格和注释的 npm 包。使用 sql-minify 可以将 SQL 语句压缩到最小，减小 SQL 语句的网络传输大小并提高 SQL 语句...

    4 年前
  • npm 包 sql-moduleon 使用教程

    什么是 sql-moduleon？ sql-moduleon 是一个在 Node.js 下使用的 SQL 查询构造器，它允许用户使用 JavaScript API 的方式来构建 SQL 查询语句，从而...

    4 年前
  • npm 包 spotify-web-utils 使用教程

    Spotify-web-utils 是一个 npm 包，该包提供了一系列工具方法和 API，方便开发者在前端应用程序中对 Spotify Web API 进行访问和操作。

    4 年前
  • npm 包 spotify-web-helper 使用教程

    Spotify 是一款非常流行的音乐播放软件，而 spotify-web-helper 是一个 npm 包，可以方便地与 Spotify Web API 进行交互。

    4 年前
  • npm 包 spotify-win-remote 使用教程

    在前端开发中，我们经常需要调用各种第三方工具和库来帮助我们完成任务。而 npm 是一个非常重要的工具，它可以让我们方便地下载和安装各种 JavaScript 库和工具。

    4 年前
  • npm包 `spotify-crawler` 使用教程

    简介 spotify-crawler 是一个基于 npm 的开源项目，旨在提供一个简单易用的方式来获取 Spotify 音乐信息。使用它，您可以快速地搜索、获取专辑、歌曲和艺术家信息。

    4 年前
  • npm 包 split-on-first-space 使用教程

    介绍 split-on-first-space 是一款可以帮助你快速分割字符串的 npm 包。它可以将字符串按照第一个空格分割成两个部分，并返回一个包含这两个部分的数组。

    4 年前
  • npm 包 spotify-wrapper-bmc 使用教程

    引言 近年来，音乐流媒体服务的发展已经改变了人们获取音乐的方式。与此同时，各种音乐相关的应用也层出不穷。在这个领域，Spotify 作为其中的佼佼者，被越来越多的人使用。

    4 年前
  • npm 包 spherical-triangulation 使用教程

    介绍 在 Three.js 中，经常需要对球体进行分割，并将其转化为三角形。spherical-triangulation 正式为此而生，它是一个将球面转化为三角形网格的 JavaScript 库，并...

    4 年前
  • npm 包 Spotify-Wrapper-andre 使用教程

    Spotify-Wrapper-andre 是一个基于 Spotify Web API 封装的 npm 包，它提供了访问 Spotify 音乐库的接口，方便前端开发者利用它构建自己的音乐应用。

    4 年前
  • 包教包会：使用 Spotify Wrapper Thais 管理你的音乐

    Spotify Wrapper Thais 是一个轻量级 JavaScript 工具包，可以让你轻松地在 Web 应用程序中使用 Spotify 音乐 API。 本文将深入探讨如何使用 Spotify...

    4 年前

相关推荐

    暂无文章