NPM包Redux-Most使用教程

前言

Redux-Most 是redux异步监听工具库,如果你已经非常熟悉异步操作了,也尝试过手写异步中间件,你应该可以很快上手 Redux-Most。但对于初学者,可能需要详细的文档说明和示例。本篇文章将介绍如何使用 Redux-Most 以及使用Redux-Most 的好处。

什么是 Redux-Most

Redux-Most 是redux异步操作的解决方案,其基于 Most.js(类似于 Rx.js)实现,核心理念是用一组简单的基本运算符来组合和转换异步事件流,从而使其易于测试和阅读。

Redux-Most的优点

易于学习

很多人会对Rx.js和Most.js这类 工具感到抵触,因为其功能复杂而难以学习。但Redux-Most 是一组基于流转换的运算符,使用简单明了,学习曲线较其它 Rx.js 类库要平缓得多,能够快速上手。

可测试性

Redux-Most 的整体思想,使应用程序中的异步行为类似于同步事件,这使得测试变得更加容易。

功能丰富

Redux-Most 提供了各种操作符,这些操作符可以让你更加容易地完成各种异步操作。例如,fromPromise操作符可以将 Promise 转换为流,catchError可以捕捉错误并执行某些操作。

Redux-Most的使用教程

安装和准备

在安装 Redux-Most 前,需要确保你的项目已经引入以下两个模块:

  • redux-observable:是一个 redux 中间件,利用rxjs来处理异步操作。
  • most:基于Observable体系的API库,实现异步数据流转换与组合功能。

安装 Redux-Most:

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

当安装完成之后,在你的redux开发配置中增加中间件:

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

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

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

创建异步操作

在Redux-Most中使用的异步操作称为 Epics,Epics 就是普通的纯函数,其检测和处理每个Action,产生输出到一个特殊的带有类似观察者功能的流中。以下是Epics的基本结构:

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

其中 action$ 是一个专门为 Epics 设计的流对象,包含所有的 action,通过 map 循环遍历每个 action,进行业务逻辑的处理。这里我们使用最简单的案例来进行示例。

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

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

上述例子实现的功能是缓冲防抖。Epics中添加了一个监听 SET_DEBOUNCE_VALUE action 的事件流,存在一定时间期间由该 action 产生的所有流都将被忽略。

函数后面的 .map()表示每个action $ 都会被发送到该运算符上。这个运算符返回它自己的新的流,它只包含特定某个 action 的数据,利用 .debounce() 函数确保他们之间间隔的时间不小于常量 MOST_DEBOUNCE_MS。然后使用 .map() 将处理的结果转换为新的 action 并发布出去。

使用Multiple Epics

当你需要同时使用多个 EPCIS 中间件时,我们需要将所有的 Epics 组合进单个根 Epic 中:

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

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

另外,还可以在 EPCIS 中使用一些 Rxjs 的异步 API 完成流操作,例如使用 switchMap 运算符使异步流得到完美组合:

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

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

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

总结

Redux-Most 是一个非常优秀的异步操作库,其学习曲线较其它 Rx.js 类库要平缓得多,其思想清晰、功能丰富,代码可测试性极强。在当下前端框架复杂度愈发增加的情况下,学习 Redux-Most 提供了优秀的帮助和支持。希望通过本篇文章,同时对 Redux-Most 产生兴趣和了解这个库更多的人能够成功上手。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60067008e361a36e0bce8bb0


猜你喜欢

  • 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 年前
  • npm 包 srcy 使用教程

    简介 srcy 是一款基于 Vue.js 开发的可拖拽的可视化拖拽代码生成器。该 npm 包提供了一种快速生成代码的方法,使开发人员可以节省时间和精力,提高开发效率。

    4 年前
  • npm 包 srd-fork-supressdelete 使用教程

    介绍 本文将介绍如何使用 npm 包 srd-fork-supressdelete,以便在前端开发中更好地抑制回车和删除键的默认行为。通过使用该包,您将能够实现更加流畅的用户交互体验,提高用户对界面的...

    4 年前
  • npm 包 srcset-loader 使用教程

    在前端开发中,对于图片的处理是一个很重要的问题。而其中一种图片优化的方法是通过 srcset 属性来使用不同尺寸的图片。而在 webpack 中使用 srcset 属性,就需要使用到一个 npm 包—...

    4 年前
  • NPM 包 srch 使用教程

    简介 Node.js 包管理工具 NPM (Node Package Manager)是 Node.js 自带的包管理器,它能够帮助开发者快速方便地查找、安装、更新、删除和管理 Node.js 模块和...

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

    在现代互联网开发中,可以说每个后端工程师都会说 AWS SQS ,但是使用这个服务一般需要前端同学来完成一个可视化的操作界面,这就需要用到一个很棒的 npm 包: sqs-processor 。

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

    前言 在前端开发中,我们经常需要与后端服务器进行数据交互。而在大型项目中,使用 AWS SQS (Amazon Simple Queue Service)作为消息队列系统是一个不错的选择。

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

    前言 随着云计算的普及,云上资源优化和管理成了越来越多的前端工程师需要关注的问题。在AWS云中,Amazon SQS是一种消息队列服务,可以通过SQS来加速并发请求,获得更快的响应速度。

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

    前言 在现代的 Web 应用中,消息队列是一个极为重要的组件。而 AWS 的 SQS 是一种受欢迎的消息队列服务。在 Node.js 开发中,开发者需要使用 AWS SDK 进行与 SQS 的通信,但...

    4 年前
  • npm 包 webpack-digest 使用教程

    介绍 webpack-digest 是一个可以帮助使用者自动生成 Webpack 构建的输出结果的 npm 包。它可以在一个普通的 JavaScript 对象中计算所有模块的生成文件名和内容的散列值,...

    4 年前
  • npm 包 webpack-dotenv-extended-plugin 使用教程

    在前端开发中,我们使用 webpack 来进行模块化打包,而使用环境变量来控制不同环境(开发、测试、生产)的配置也是非常普遍的。但是每次手动处理环境变量的配置信息,无论是繁琐还是容易出错,都会影响我们...

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

    在前端开发中,我们常常会需要为不同的环境配置不同的参数。例如开发环境、测试环境和生产环境的接口地址可能不同。为了避免手动修改代码中的参数,我们可以使用 webpack-dotenv-plugin 这个...

    4 年前
  • npm 包 webpack-dots-reporter 使用教程

    在前端开发中,webpack 是一款非常流行的构建工具。而 webpack 的输出信息有时候不够直观,难以一眼看出构建过程的进度和结果。这时候,我们可以通过使用 webpack-dots-report...

    4 年前
  • npm 包 webpack-dts-bundle 使用教程

    随着前端技术的不断发展,越来越多的开源库和框架出现在我们的视野中。为了方便快捷地使用这些开源库,npm 包成为了我们首选的方式。但是在使用 TypeScript 开发时,我们需要有对应的类型定义文件以...

    4 年前
  • npm 包 webpack-dynamic-public-path-plugin 使用教程

    前言 webpack 是现代化前端开发中最重要的打包工具之一,它能够将各种前端资源转化为浏览器可用的代码并进行压缩、合并等操作,提高前端代码的可用性和可维护性。但是,在一些需要动态部署的场景下,我们可...

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

    在 Web 开发中,前端工程化已经成为了一个不可避免的趋势。其中,Webpack 是前端工程化中最为流行的打包工具之一。Webpack 可以将多个 JS、CSS 文件打包成一个或多个文件,从而提高页面...

    4 年前

相关推荐

    暂无文章