npm 包 redux-actions-async 使用教程

介绍

redux-actions-async 是一个用于处理异步操作的 npm 包。它是 redux-actions 的一个扩展，可以帮助你更方便地处理异步 action 和 reducer。redux-actions-async 提供了一种简单的方式来将异步代码从你的 action creator 中分离出来，使你的代码更加清晰和易于管理。

安装

通过 npm 安装 redux-actions-async：

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

使用

创建异步 Action Creator

Redux 的标准做法是将网络请求转移到 Redux 中。

创建一个异步的 action creator，可以使用 redux-actions-async 中的 createActionAsync 方法。

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

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

createActionAsync 接受两个参数：action type 和一个返回 Promise 结果的异步函数。它返回一个对象，包含三个 action creator：FETCH_DATA_STARTED，FETCH_DATA_SUCCEEDED 和 FETCH_DATA_FAILED。

在这个例子中，我们向 https://example.com/users 发送了一个网络请求，并使用 response 对象的 json() 方法获取响应数据。然后使用 Promise 来处理异步操作。

使用异步 Action Creator

在你的应用程序中，你可以像使用任何其他的 action creator 一样使用这个异步 action creator：

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

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

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

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

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

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

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

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

在这个例子中，我们使用了 react-redux 的 connect() 函数将 MyComponent 组件与 Redux store 相连接。在 componentDidMount 生命周期中，我们调用了 fetchUserData 方法来获取用户数据。在 render 函数中，我们根据 isLoading 属性来显示“Loading…”或用户数据。

处理异步操作

最后，我们需要在 reducer 中处理异步操作。

redux-actions-async 提供了一个 reducerAsync 函数，用于自动生成 reducer。你只需要传递它的参数：action type 和一个对象，用于更新 state。在这个对象中，你需要提供三个函数：started、succeeded 和 failed，分别对应异步操作的不同阶段。

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

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

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

在这个例子中，我们使用了刚刚创建的 fetchUserData action creator。我们定义了三个不同的函数，处理异步操作的三个不同阶段。started 函数在 action 已经被发送后执行，succeeded 函数在异步操作成功后执行，failed 函数在异步操作失败后执行。

我们还传递了一个 initialState 参数用于初始化 state。

示例代码

创建一个简单的 Redux 应用来展示如何使用 redux-actions-async。该应用使用 GitHub 的 API 来获取用户数据。你需要提供自己的 GitHub 用户名和存储库，才能在本地测试该应用。

安装依赖：

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

App.js：

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

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

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

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

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

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

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

reducers.js：

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

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

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

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

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

actions.js：

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

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

store.js：

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

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

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

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

结论

redux-actions-async 是一个非常有用的 npm 包，用于处理异步操作。它可以帮助你更轻松地管理你的 Redux 应用程序，并使代码更清晰易懂。使用它可以使你的应用程序更加简洁和易于维护。

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

阅读全文

猜你喜欢

  • npm包relative-path使用教程

    引言 在前端开发过程中，我们常常需要引入其他js或css资源文件，这些文件的引用路径可能会比较麻烦，尤其是在跨目录引用的时候。npm包relative-path就是为了解决这个问题而生的，它可以帮助我...

    4 年前
  • npm 包 relative-package 使用教程

    简介 在前端开发中，我们经常需要引用其他模块、组件或者函数库，npm 是一个包含了大量开源软件包的平台，它使得前端项目能够更好地开发和组织。然而，在某些情况下，我们需要编写一些本地模块，并且我们的项目...

    4 年前
  • npm 包 relative-path-map 使用教程

    作为前端开发人员，我们常常需要在项目中引入许多不同的资源文件，例如图片、样式和 JavaScript 等。这些文件通常被组织在不同的目录层级中，以便更好地管理和维护。

    4 年前
  • npm 包 redux-wait 使用教程

    在 React 应用中，为了管理应用的状态，我们会使用 Redux 这一流行的状态管理库。Redux 在很多方面给我们带来了诸多优势，但是在异步操作处理上就稍显吃力了。

    4 年前
  • npm 包 relative-path-to-relative-url 使用教程

    在前端开发过程中，经常需要处理相对路径和绝对路径的转换问题。而 npm 包 relative-path-to-relative-url 可以帮助我们方便地将相对路径转换为相对 URL，极大地简化了我们...

    4 年前
  • npm 包 regexp-stream 使用教程

    什么是 RegExp？ 在 JavaScript 中，RegExp 是正则表达式的缩写，用于匹配字符串的模式。它是一个对象，包含了一个正则表达式的文本和一些属性。RegExp 可以让我们通过定义规则来...

    4 年前
  • npm 包 regexp-tokenize 使用教程

    正则表达式是前端开发中经常使用的工具之一，在对字符串进行处理时，能够帮助我们快速匹配和修改。但是在某些情况下，正则表达式的匹配结果不够精细，需要进行进一步的处理，此时就可以使用 npm 包 regex...

    4 年前
  • npm 包 regexp-special-chars 使用教程

    简介 在前端开发中，正则表达式经常被用于文本匹配、替换、过滤等工作，而在正则表达式中，有一些特殊字符在使用时需要特别注意。而 npm 包 regexp-special-chars 就是专门用于处理正则...

    4 年前
  • npm 包 regexp-stream-tokenizer 使用教程

    在前端开发中，往往需要对输入的文本进行特定的格式化、提取和处理操作。而正则表达式则是实现这些操作的重要工具。在 Node.js 中，可以通过 regexp-stream-tokenizer 这个 np...

    4 年前
  • npm 包 remira-object 使用教程

    什么是 remira-object remira-object 是一个 JavaScript 对象工具库，旨在简化和优化使用和操作 JavaScript 对象的过程，并支持对象的类型和验证。

    4 年前
  • npm 包 remit-route 使用教程

    介绍 remit-route 是一个轻量级的前端路由库，它可以帮助开发者实现应用程序内的路由管理。remit-route 采用了 Hash 模式和 History 模式两种模式支持路由的实现。

    4 年前
  • npm 包 regexp-string-mapper 使用教程

    引言 前端开发中，经常需要进行字符串替换操作。如果需要大量替换操作还需要保证效率，手写的字符串替换代码显然是低效繁琐的。那么我们可以使用 npm 包 regexp-string-mapper 来帮助我...

    4 年前
  • npm 包 regexp-tpl 使用教程

    正则表达式是前端开发中常用的工具之一，可以用来进行字符串匹配、格式校验、字符替换等操作。而 npm 上的 regexp-tpl 包提供了一种更加便捷、灵活的方式来使用正则表达式，本文将介绍该包的使用方...

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

    在前端开发中，日志是非常重要的，可以帮助开发者快速诊断问题和追踪错误。而 sp-json-logger 是一个非常强大的 npm 包，可以帮助我们更加方便地记录和管理日志。

    4 年前
  • npm 包 sp-list-items-as-folders 使用教程

    在前端开发中，我们常常需要处理 SharePoint 列表中的数据。如果 SharePoint 列表中数据结构较为复杂，那么前端开发难度也会相应增加。在这种情况下，我们可以使用 sp-list-ite...

    4 年前
  • npm 包 sp-list-query 使用教程

    SharePoint 是一个广泛使用的企业级协作平台，用于组织和存储企业数据。在前端开发中，我们经常需要从 SharePoint 列表中查询和获取数据。于是，npm 包 sp-list-query 应...

    4 年前
  • npm 包 sp-list-to-table 使用教程

    在前端开发中，我们常常需要将 SharePoint 中的列表数据以表格的形式展示在网页中。sp-list-to-table 是一个方便的 npm 包，它可以帮助我们快速地将 SharePoint 列表...

    4 年前
  • npm 包 SP-load 使用教程

    在前端开发中，常常需要加载大量的图片或其他资源。为了提高网站或应用的加载速度和用户体验，我们经常采用一些工具、技术来优化资源的加载。其中，SP-load 是一款优秀的加载工具，可以帮助开发者快速实现资...

    4 年前
  • npm 包 sp-make-folders 使用教程

    在前端开发中，我们经常需要创建一些文件夹来存放相关的代码，比如样式、逻辑、图片等。如果手动创建这些文件夹会很麻烦和浪费时间，那么有没有一种工具可以快速的帮助我们创建这些文件夹呢？答案是可以的，而 np...

    4 年前
  • npm 包 sp-map 使用教程

    简介 sp-map 是一个基于 Leaflet 的易于使用、高性能的 JavaScript 地图库。它可以使用简单的 API 创建地图，并支持各种常见的地图功能，如缩放、拖动、标记点等。

    4 年前

相关推荐

    暂无文章