npm 包 redux-runner 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

什么是 redux-runner

redux-runner 是一个帮助开发者管理 Redux 异步操作的工具，它可以将 Redux 异步操作逻辑与 UI 组件完全分离，让开发者能够更加简单、精确地管理异步操作的流程。

如何使用 redux-runner

安装

使用 npm 安装 redux-runner：

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

在项目中使用

编写异步操作逻辑

在 redux-runner 中，异步操作逻辑需要被抽象成一个 runner。一个 runner 是一个普通的 JavaScript 对象，它至少需要包含两个属性：types 和 run。

types 用来定义 runner 所处理的异步操作的类型，它是一个字符串数组，例如：

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

这里定义了三个异步操作类型：FETCH_USER_REQUEST、FETCH_USER_SUCCESS 和 FETCH_USER_FAILURE。

run 是 runner 所要处理的异步操作逻辑，它是一个函数，例如：

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

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

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

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

这里定义了一个 runner，它处理的是名为 fetchUser 的异步操作。这个异步操作会向 GitHub API 发送一个请求，获取指定用户的信息，并返回一个 Promise。

配置 Redux Store

在配置 Redux Store 时，需要将 redux-runner 中提供的 middleware 添加到 Store 的 middleware 链中：

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

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

在 UI 组件中使用

然后，在 UI 组件中，可以使用 connect 函数将 component 和 runner 注入到 props 中：

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

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

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

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

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

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

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

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

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

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

这里是一个 React component 的例子。它使用 connect 函数将 component 和 runner 注入到 props 中，并在 componentDidMount 生命周期中调用了 runner 函数。

在 mapStateToProps 函数中，可以从 Store 中获取 fetchUser 的状态，并将它们映射到 component 的 props 中。

总结

通过 redux-runner，开发者可以更加简单、精确地管理异步操作的流程。它可以将 Redux 异步操作逻辑与 UI 组件完全分离，并通过 runner 中定义的 types 和 run 属性来管理异步操作的流程。在使用 redux-runner 时，需要在配置 Redux Store 时添加 middleware，并使用 connect 函数将 component 和 runner 注入到 props 中。

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

阅读全文

猜你喜欢

  • npm 包 rollup-plugin-webassembly 使用教程

    在前端开发中，我们经常需要使用 WebAssembly 技术来加速 JavaScript 的执行速度。而 rollup-plugin-webassembly 就是一个适用于 Rollup 的 WebA...

    3 年前
  • npm 包 nu-svn 使用教程

    在前端开发中，我们通常需要进行版本管理，而 SVN 是广泛使用的版本控制系统之一。在使用 SVN 进行版本管理时，我们可以通过 npm 包 nu-svn 来进行操作。

    3 年前
  • npm 包 inlineapp-tools 使用教程

    在前端开发过程中，我们经常需要将不同的 JavaScript 文件合并到一个单独的文件中，以减少浏览器请求的数量，提高页面加载速度。而 npm 包 inlineapp-tools 提供了一种方便的方式...

    3 年前
  • npm 包 base-32 使用教程

    简介 base-32 是一种基于 32 个可打印字符的编码算法，常用于将二进制数据转换成 ASCII 字符串。它拥有一定的安全性，可用于加密等场景中。 npm 包 base-32 是一款基于 Java...

    3 年前
  • npm 包 Page-Snitch 使用教程

    在前端开发中，我们常常需要监测网页性能并进行优化。而 npm 包 Page-Snitch 则为开发者提供了一种简单易用的监测工具。本文将介绍如何安装使用该包，以及如何根据监测结果进行网页性能优化。

    3 年前
  • npm 包 droiv-vue 使用教程

    介绍 droiv-vue 是一个基于 Vue 的 UI 组件库，它的目标是提供高品质的 Vue UI 组件和交互体验。它支持按需引入，同时提供了 TypeScript 描述文件。

    3 年前
  • npm 包 atm-timestamp 使用教程

    介绍 atm-timestamp 是一个用于生成时间戳的 npm 包，在前端开发中十分常用。它通过封装了原生的 JavaScript 时间戳获取函数，使得获取时间戳变得更加简单、方便。

    3 年前
  • npm 包 chrome-ddp 使用教程

    什么是 chrome-ddp？ chrome-ddp 是一个用于在 Chrome 插件中操作 Meteor 应用程序的 npm 包。它与 DDP（分布式数据协议）协议兼容，并提供了一组易于使用的 AP...

    3 年前
  • npm 包 u-label.vue 使用教程

    前言 在前端开发中，标签(label) 是非常常用的一种组件，它的作用十分广泛，如表单、列表、分类等都需要使用标签进行表示。 本篇文章将介绍一个非常实用的npm包——u-label.vue，它是一个快...

    3 年前
  • npm 包 condition-noop 使用教程

    npm 包 condition-noop 是一个非常有用的工具，它可以帮助前端开发人员在编写条件语句时更加高效地处理特殊条件。本文将介绍 npm 包 condition-noop 的使用教程，并提供深...

    3 年前
  • npm包 x-range 使用教程

    简介 x-range是一个前端使用的npm包，为开发者提供了更加便利的数字范围选择方式，包含对范围的拖拽、点击、悬浮等操作，适用于多种前端框架，如Vue.js、React等。

    3 年前
  • npm 包 @zhuangya/trie 使用教程

    什么是 trie 树？ Trie 树（也叫“字典树”）是一种树形数据结构，用于高效地存储和检索字符串数据集。它的特点是能够最快地查找、插入和删除数据，时间复杂度为 $O(l)$，其中 $l$ 是字符串...

    3 年前
  • npm 包 koa-api-client 使用教程

    在前端开发中，有很多需要向后端发送请求获取数据的场景，这时就需要使用到 API 客户端。在 Node.js 中有很多 API 客户端，今天我们介绍一个基于 koa 框架的 API 客户端 —— koa...

    3 年前
  • npm 包 @aromot/bootstrap-helpers 使用教程

    现在的 Web 前端开发越来越依赖于各种优秀的工具和库来提高开发效率和代码质量，其中 Bootstrap 肯定是不可或缺的一份子。而 @aromot/bootstrap-helpers 则是 Boot...

    3 年前
  • npm 包 redux-promise-action 使用教程

    简介 redux-promise-action 是一个 npm 包，它为 Redux 中的异步操作提供了一种更加易用的方法。它使用 Promise 的方式来封装异步操作，并且提供了一种统一的 acti...

    3 年前
  • npm 包 @chlesmes/platzom 使用教程

    简介 @chlesmes/platzom 是一个基于 JavaScript 的 npm 包，可以实现一些有趣的转换操作，如将字符串倒序输出、将字符串去除所有元音字母等。

    3 年前
  • npm 包 devapt-app-testbus 使用教程

    当我们开发前端应用时，我们经常会遇到需要进行单元测试的情况。在这个时候，我们需要一些工具来帮助我们进行测试。npm 包 devapt-app-testbus 就是一个功能强大、易于使用的测试工具。

    3 年前
  • npm 包 quickpeer 使用教程

    简介 quickpeer 是一个基于 WebRTC 技术的快速 P2P 文件传输库。它允许你在浏览器和 Node.js 中直接传输文件，而不需要任何服务器的支持。本文将对 quickpeer 的使用进...

    3 年前
  • npm包redux-persist-transform-filter-immutable使用教程

    前言 在前端开发中，状态管理是一个必备的技能。Redux 是一个非常流行的状态管理库，它可以帮助前端开发者轻松管理状态并保持应用程序的一致性。redux-persist 是一个扩展库，它可以使我们将 ...

    3 年前
  • npm 包 danger-plugin-tslint 使用教程

    在前端开发中，使用 TSLint 工具能够帮助我们检查 TypeScript 代码的规范性和质量。而 danger-plugin-tslint 是一个可以结合 DangerJS 使用的 npm 包，让...

    3 年前

相关推荐

    暂无文章