Redux 是一个非常流行的状态管理库，它的核心概念之一就是将所有的状态改变都封装成 action，通过 reducer 处理这些 action 来改变状态。
但是在实际开发中，我们经常需要处理异步操作，例如网络请求或者定时器。Redux 提供了中间件的概念来实现异步操作，最常见的中间件就是 redux-thunk。
而在本文中，我们将讨论如何使用 RxJS 来实现 Redux 模式下的异步操作。RxJS 是一个响应式编程库，它提供了许多功能强大的 operator 来处理异步操作，因此非常适合用于处理 Redux 中的异步操作。
相关概念介绍
在开始使用 RxJS 之前，我们需要了解一些相关的概念。
Observable
Observable 是 RxJS 中最重要的概念之一，它代表着一个可以传递零个或多个值的异步序列。我们可以使用许多 operator 来处理这个序列，例如 map、filter、mergeMap 等。
Observer
Observer 是一个对象，它定义了一些方法来处理被 Observable 所传递的值。Observer 中最重要的方法是 next，它表示 Observer 接收到了一个新的值。
Subscription
Subscription 表示 Observable 的执行，它代表着一个可取消的异步操作。我们可以使用 unsubscribe 方法来取消这个操作。
在 Redux 中，我们通常将异步操作封装成 action，然后通过中间件来处理这些 action。而在使用 RxJS 来处理异步操作时，我们可以将一个 Observable 作为一个 action，在 reducer 中处理这个 action 并返回一个新的状态。
示例
让我们来看一个简单的例子，它演示了如何使用 RxJS 来实现异步操作。
首先，我们需要安装 RxJS：
npm install rxjs
然后，我们可以编写一个异步操作的 action，例如：
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - ---- - ---- ------------
------ - --------- --- - ---- -----------------
----- ---------- - -------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
--------- --------------- -
----- ------ -----------
-
--------- ---------------------- -
----- ------ -------------------
-------- ----
-
--------- ---------------------- -
----- ------ -------------------
------ ------
-
------ ---- --------- - --------------- - ---------------------- - -----------------------
----- --------------- - --- --------------- -- --
----- -----------
---
----- ---------------------- - --------- ----- ---------------------- -- --
----- -------------------
--------
---
----- ---------------------- - ------- ------- ---------------------- -- --
----- -------------------
------
---
------ ----- --------- - -- -- ---------- -------------------- -- -
----- -------- - -------------------------------
------------ -- ----------------------------------
--------------- -- -------- -------------------
--
----- ------------ - -------------------
------ -- -----------------
----- -- ----------------------------------------
-- -- -----------------------
--
------ -------------
--上面的代码中，我们定义了三个 action 分别代表请求开始、请求成功和请求失败。然后我们在 fetchData 中创建了一个 Observable，它通过 ajax.getJSON 发起了一个 GET 请求，并将返回值映射成了一个请求成功的 action。
同时，我们使用了 mergeMap 将这个 action 序列化成了一个数组，其中包括了请求成功的 action 和一个新的请求开始的 action，这样我们就可以创建一个无限的请求循环，直到 Observable 被取消。
最后，我们使用 subscribe 订阅了这个 Observable，并在响应式中使用了 dispatch 方法来发送 action。
我们可以在 reducer 中处理这些 action，并返回一个新的 state。
-- -------------------- ---- -------
------ - --------- - ---- ------------
--------- ------- -
----- ----
---------- --------
------ ----- - -----
-
----- ------------- ------- - -
----- -----
---------- ------
------ -----
--
------ ----- --------- - ------ - ------------- ------- ----------- ------- -- -
------------------- -
---- -----------
------ - --------- ---------- ---- --
---- -------------------
------ - --------- ---------- ------ ----- -------------- --
---- -------------------
------ - --------- ---------- ------ ------ ------------ --
--------
------ ------
-
--总结
在本文中，我们介绍了如何使用 RxJS 来实现 Redux 模式下的异步操作。RxJS 提供了许多强大的 operator 来处理异步操作，让我们能够更加方便地处理 Redux 中的异步操作。
然而，在使用 RxJS 时，我们也需要注意不要过度使用它。RxJS 是一种非常强大的编程工具，但是它的语言和概念也相对较为复杂，需要花费一些时间去学习。
最后，除了 RxJS，还有很多其他的工具可以用来处理 Redux 中的异步操作，例如 redux-saga 和 redux-observable 等。我们可以根据具体的应用场景来选择最适合的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1e0a3f6b2d6eab3bb03fb