简介
RxJS 是一个 ReactiveX 库，它提供了一种简单而强大的方法来处理异步数据流。它让我们能够使用更简单、更清晰和更易于维护的方式来处理异步数据流。Redux 则是另一个非常流行的 JavaScript 库，它采用了单向数据流的范式，使得应用程序的状态更容易被管理。
在本文中，我们将使用 RxJS 与 Redux 相结合，展示如何将 RxJS 应用于 Redux 应用程序中的某些场景。
Redux
Redux 是一个 JavaScript 库，它是一个可预测的状态容器。（Redux 描述自己的方式，Redux 不是一个框架，而是一个状态管理库。）Redux 使开发者更容易地编写可预测的应用程序。一个 Redux 应用程序将其状态存储在一个单独的、不可变的状态树（也称为 Store）中。
Redux 应用程序使用 actions 来描述发生的事情，并使用 reducers 来对这些 actions 进行响应。reducers 接收一个先前的状态和一个 action，并输出一个新的状态。这种方式是 Redux 的核心思想。
要了解更多关于 Redux 的信息，请访问 Redux 官网。
RxJS
RxJS 基于 ReactiveX 这个框架，它旨在提供一种简单而强大的方法来处理异步数据流。使用 RxJS，我们可以用更简单、更清晰和更易于维护的方式来处理异步数据流。RxJS 通过 Observable 的概念处理数据流，这与 Promise 类似，但是 Observable 更加灵活，并且可以处理多个值。Observable 可以被认为是一个集合，它包含了多个值，这些值可以在异步时间轴上传递。
要了解更多关于 RxJS 的信息，请访问 RxJS 官网。
实例
在本示例中，我们将创建一个 Redux 应用程序，该应用程序存储有关用户的信息，例如用户的名称、电子邮件和密码。我们将使用 RxJS 响应表单的输入，以便在用户输入之后，我们可以将变化源源不断地发送到 Redux 中。这有助于我们避免在控件之间传输单个值，并使控件间的通信更简单。
第一步：建立 Redux 应用程序
我们需要先设置一个 Redux 应用程序。我们将创建一个包含 userInfo 信息的 store。我们还需要创建一个 reducer，它会接收一个 action 和当前状态，并输出一个新的状态。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
--------- -
----- ---
------ ---
--------- --
-
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ - --------- --------- - ------------------ ----- -------------- - --
---- --------------------
------ - --------- --------- - ------------------ ------ -------------- - --
---- -----------------------
------ - --------- --------- - ------------------ --------- -------------- - --
--------
------ ------
-
-
----- ----- - -------------------------我们现在有一个设置好的 Redux 应用程序。
第二步：Observable 响应输入
随着用户在表单上输入，我们需要监听输入并将输入值发送到 Redux 状态存储中。要实现这一点，我们需要用 RxJS 创建一个流并使用 Redux 中间件来让我们发送流。
先安装以下两个库：
yarn add rxjs redux-observable
我们要做的第一件事是创建一个 observable。我们将监听输入框，每次输入框值的更改时，我们将触发一个新的输入值。此外，我们还需要一个操作符，该操作符将启动 observable 并将值发送到 Redux 中。在我们的操作符完成之前，还需要一个 Redux action，以便我们将数据发送到 Redux 中。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ----- - ---- ----------------- ----- -------------- - ------- -- -- ----- ------------------- -------- ----- --- ----- ------------- - ------------------------------------------- ----- ------------------- - ------------------------ -------------- ----------- -- -------------------- -- ----- ----------------- - ------------------------- ---------- -- --------------------- --
在这里，我们从 rxjs 库中导入 of 操作符，该操作符将创建一个 observable，该 observable 会发出一个单个值。我们还从 rxjs/operators中导入了 mapTo 操作符，该操作符将从 observable 中发出的每个值都映射到一个由我们指定的新值，并将其返回为发射出去的下一个值。
在这里，我们创建了一个 updateUserName 函数。这将是我们用来发送值到 Redux 的函数。此函数接收一个参数 value，该参数为我们从表单中收集的值，并使用此值创建一个 type 为 UPDATE_USER_NAME 的对象。
接下来，我们从 HTML DOM 中选择了一个输入框，监听它的 input 事件。在这里，我们创建了一个 observable，该 observable 将每秒钟发出一个新值。我们在这里使用 map 运算符来映射从输入框得到的值，使其只发出我们要从表单获取的值。
接下来，我们使用 map 运算符将输入值映射到 Redux 数据流。在这里，我们将调用 updateUserName 来更新用户信息。
第三步：将 Observable 与 Redux 集成
在这里，我们需要将 observable 与 Redux 集成。我们需要使用 RxJS EPIC 中的 mergeMap，将 observable 扁平化，并且使用 action 属性来将输入值发送到 Redux。
我们从 redux-observable 库中导入了 mergeMap 运算符。该运算符使我们可以将 observable 扁平化，并将每个值映射到我们想要执行的操作。在这里，我们将发送一个 Redux action，该 action 包含了我们从表单收集的值。
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
------ - ---- -------- - ---- -----------------
----- -------------- - --------- -- -
------ -------------
---------------------------------
----------------- -- ----------------
------ ------- -- -- ------------------------
--
--
--
----- -------- - -----------------------------在这里，我们创建了一个名为 updateUserEpic 的函数，用于处理 observable 的值。该函数是一个处理器函数，它会接收一个名为 action 的对象。当 action 类型为 UPDATE_USER_NAME_INPUT 时，我们将通过 map 运算符将 action 映射为包含我们获取的数据的新 action。然后，我们可以使用 mergeMap 运算符将新的 action 封装在 observable 中，并执行一个或多个操作，这里我们使用了 updateUserName 更新了用户名称。
最后，我们需要将 epic 与 reducer 结合在一起，这就是 Redux 集成 RxJS 的完整示例。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - --------------------- ------------ - ---- -------------------
------ - ---- -------- - ---- -----------------
------ - --------- - ---- -------
----- ------------ - -
--------- -
----- ---
------ ---
--------- --
-
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ - --------- --------- - ------------------ ----- -------------- - --
---- --------------------
------ - --------- --------- - ------------------ ------ -------------- - --
---- -----------------------
------ - --------- --------- - ------------------ --------- -------------- - --
--------
------ ------
-
-
----- -------------- - ------- -- --
----- -------------------
-------- -----
---
----- ------------- - -------------------------------------------
----- ------------------- - ------------------------ --------------
----------- -- -------------------
--
----- ----------------- - -------------------------
---------- -- --
----- -------------------------
-------- ----
---
--
----- -------------- - --------- -- -
------ -------------
---------------------------------
----------------- -- ----------------
------ ------- -- -- ------------------------
--
--
--
----- -------- - -----------------------------
----- -------------- - -----------------------
----- ----- - ------------------------ ---------------------------------
-----------------------------
------------------------------------ -- -
-----------------------
---结论
RxJS 与 Redux 的集成，为我们提供了一种简单而强大的方法来处理异步数据流。它将帮助您在 React 应用程序中创建更简单、更清晰和更易于维护的代码。在本文中，我们已经学习了具有深度和指导意义的用例，并展示了如何将 RxJS 与 Redux 结合使用。我希望您能从这篇文章中学到一些有用的东西。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f60984c5c563ced57edfbf