npm 包 redux-observable-adapter-rxjs-v4 使用教程

介绍

redux-observable-adapter-rxjs-v4 是一个 Redux 中间件，它允许您使用 RxJS v4 来编写 redux-observable 的 epic。它为编写 redux-observable 提供了更多的选择，既可以使用 RxJS v6 也可以使用旧版本的 RxJS。

本教程将为您展示如何使用 redux-observable-adapter-rxjs-v4 来构建 Redux 应用程序的异步逻辑。

安装和配置

安装 redux-observable-adapter-rxjs-v4：

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

在 Redux 中使用该中间件：

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

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

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

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

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

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

以上代码中，我们通过调用 adapterFactory() 方法来创建适配器，并将其作为依赖项传递给 createEpicMiddleware() 方法。然后，我们将该中间件作为 Redux Store 的一个 applyMiddleware。

使用

使用 redux-observable-adapter-rxjs-v4，与以前使用 Redux-Observable 没有区别。唯一不同的是，您需要将 RxJS v4 运算符替换为对应的 RxJS v6 运算符。

例如，这是一个使用 RxJS v4 中的 map 运算符的示例：

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

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

它可以被重写利用 RxJS v6：

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

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

示例

以下是一个完整的示例，其中包含了一个 includeEpic() 辅助方法，该方法将适配器作为依赖项传递到每个 epic 中，并将所有 epics 导入并合并为一个 rootEpic。

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

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

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

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

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

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

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

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

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

结论

redux-observable-adapter-rxjs-v4 使得您可以使用最新版本和旧版本的 RxJS 来编写 Redux-Observable epics。它为编写 Redux 应用程序的异步逻辑提供了更多的选择，并且易于安装和使用。

通过这个 npm 包，开发人员可以更加方便地控制异步代码，并更加容易地跟踪状态。这样将节省时间和精力，提高生产力。

在未来的项目中，我们可以考虑使用 redux-observable-adapter-rxjs-v4 来测试和组织我们的 async action，并且能够通过版本兼容性的解决方案支持不同的 RxJS 版本。

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

阅读全文

猜你喜欢

  • npm 包 reeeset 使用教程

    在前端开发中，我们经常需要样式重置或标准化来消除浏览器之间的差异，减少不必要的 hack，而这个过程通常是相当繁琐的。 幸运的是，现代的前端生态系统中有许多常用的工具和框架，能够帮助我们快速地重置或标...

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

    前言：Redux 是当前前端开发中使用的最流行的状态管理工具之一，但在使用的过程中对于表单验证等领域却显得力不足。但在这里，我们可以使用一个名为 redux-validation 的 npm 包，它可...

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

    前言 redux-usecase 是一个简单的库，它可以帮助你更好地管理 Redux 状态。通过使用 use case，将状态的操作与 view 分离，更好地组织代码和测试，同时也更容易维护和修改。

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

    前言 在前端开发中，redux 是一种常用的状态管理工具，在应用中，我们常常需要定义一些常量和错误状态，以及验证 state 是否符合规范。在这个过程中，redux-validate-fsa 可以帮助...

    4 年前
  • npm 包 regex_for_range 使用教程

    在前端开发中，常常需要对一些不规则的文本进行操作，比如查找、替换等。为了方便实现这些功能，我们可以使用正则表达式来匹配目标文本。而 npm 上的 regex_for_range 包则是一个非常好用的正...

    4 年前
  • npm 包 reef-service 使用教程

    什么是 reef-service？ reef-service 是一款用于前端开发的 npm 包，它可以帮助我们快速搭建前端服务端，使得前端与后端的数据交互更加方便。

    4 年前
  • npm 包 Reegux 使用教程

    前言 在 Web 应用开发中，难免会遇到复杂的数据流管理问题，例如 React 应用中的组件间通信和状态管理。为了解决这类问题，出现了 Redux 等状态管理库，而在 Redux 的基础上，Reegu...

    4 年前
  • npm 包 reef-pulse-emitter 使用教程

    简介 reef-pulse-emitter 是一个用于处理海洋生态数据的 npm 包。它提供了一个可以生成测量和处理生态系统中脉冲事件的工具，同时能够生成与该事件相关的数据。

    4 年前
  • npm 包 regex.js 使用教程

    正则表达式是一种非常强大的文本处理工具，而 regex.js 是一个优秀的 JavaScript 正则表达式的解析库，在前端开发中有着广泛的应用。本文将为大家介绍如何使用 regex.js，详细的指导...

    4 年前
  • npm 包 reef-client 使用教程

    简介 Reef Client 是一款 Node.js 的轻量级 Web 框架，可以帮助开发者快速搭建 Web 应用程序，简化 API 接口和路由的创建过程。使用 Reef Client 可以大幅提高 ...

    4 年前
  • npm 包 regexhub 使用教程

    正则表达式是前端开发中非常重要的一个概念，它可以帮助我们快速处理数据并匹配需要的字符串。在实际开发中，我们可能会遇到一些常见的正则匹配需求，这时候我们可以利用 npm 上的 regexhub 包来简化...

    4 年前
  • npm 包 regexify 使用教程

    正则表达式是前端开发中一个非常重要的概念，它可以用来匹配和替换字符串中的特定模式。在实际开发中，我们经常需要构建一些特定的正则表达式来满足业务需求。而 npm 包 regexify 则提供了一种方便的...

    4 年前
  • npm 包 regexmatcher 使用教程

    前言 在前端开发中，我们经常会用到正则表达式来处理字符串。而在 JavaScript 中，正则表达式（Regex）是一个内建的对象。虽然我们可以使用 JS 的内建方法来做 Regex，但是 npm 上...

    4 年前
  • npm 包 regexmap 使用教程

    regexmap 是一个 NPM 包，它提供了一种简单的方式来使用 JavaScript 正则表达式对字符串进行匹配和替换操作。在本教程中，我们将探讨如何使用 regexmap 包进行字符串匹配和替换...

    4 年前
  • npm 包 reel-js 使用教程

    reel-js 是一个可定制钩子的轻量级滚动库，它使得在 Web 应用中创建平滑的滚动效果更加简单快捷。本文将详细介绍 reel-js 的使用方法，包括安装、初始化以及常见使用场景。

    4 年前
  • npm 包 reelib 使用教程

    在前端开发中，我们常常需要使用一些现成的工具库，以便提高我们的开发效率。其中，npm 是前端依赖管理的重要工具之一，可以让我们方便地安装和管理现成的工具库。在本篇文章中，我们将介绍一个常用的 npm ...

    4 年前
  • npm 包 Reelm 使用教程

    Reelm 是一个轻量级、易于学习的 JavaScript 框架，用于构建 Web 应用。它提供了用于管理应用程序状态的工具，使得管理状态变得更加简单和直观。 本文将介绍如何使用 npm 包 reel...

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

    在前端开发中，正则表达式是无处不在的。而 regexp-capture-interpolation 这个 npm 包提供了一种更为高效的正则表达式匹配和替换方法。本篇文章将详细介绍 regexp-ca...

    4 年前
  • NPM包REEM使用教程

    在前端开发中，使用一些优秀的工具能够提高开发效率和代码质量。REEM是一个易于使用的npm包，它可以帮助我们进行前端的组件化开发。在本文中，我们将详细介绍如何使用REEM包。

    4 年前
  • npm 包 reely 使用教程

    在前端领域中，许多项目都需要对视频进行处理，例如剪辑、转码、压缩等操作。reely 是一款基于 Node.js 的 npm 包，提供了对视频进行处理的 API，非常方便且易于使用。

    4 年前

相关推荐

    暂无文章