什么是 redux-middleware-rxjs
redux-middleware-rxjs 是一个基于 RxJS 的 Redux 中间件，它可以将 Redux 的 dispatch 功能与 RxJS 的 Observable、Observer、Subject 等功能结合起来使用，达到更加灵活高效地管理应用状态的目的。
安装和基本使用
首先，在你的项目中安装 redux-middleware-rxjs：
npm install redux-middleware-rxjs --save
然后，在你的 Redux Store 中引入该中间件，并将其加入 middleware 列表：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------------- -- ------ ------ - ------------ - ---- --------------- -- --- ------ - -------- - ---- ---------- -- ----- ------ ----------- ---- ------------- -- ------- -- ----- -------------- - ----------------------- -- ---------- ----- ---------------- - --------------- -- --------- ----- ---------- - ------------------------------- ------------------ ----- ----- - ------------------------ ------------ ----------------------------- -- ----- ------ ------- ------
如上面代码所示，使用 redux-middleware-rxjs 需要先引入 redux-observable 观察者库，然后新建观察者中间件实例，将其加入 middleware 列表，然后在 createStore 函数中将其传入，最后启动观察者运行。
中间件的具体使用
为了达到更加灵活的状态管理，redux-middleware-rxjs 的主要功能是将 Redux 的 dispatch 发送的 action 封装成了 RxJS 的 Observable 对象。这样，在使用 Redux 更新状态的时候，我们可以像使用 RxJS 中的 Observable 一样，对 state、action 进行转换、过滤、组合、延迟等操作，进一步提升应用的响应速度和可维护性。
使用示例1：对状态延迟1秒进行更新
-- -------------------- ---- -------
------ - ------ ----- - ---- ----------------- -- ------
------ - ------ - ---- ------------------- -- -- ---------------- --- ------ --
----- ---------------- - ------- -- -
------------- -- -----
------------------------ -- ---- ------
------------ -- ----
------- ----- ----------------------- -- -- ---- ------
-
--
------ ------- -----------------上面的代码演示了一个使用 redux-middleware-rxjs 的经典示例：对于指定类型的 UPDATE_STATUS action，我们可以使用操作符 delay 延迟1秒执行，并将其转化为新的 STATUS_DELAYED_UPDATE action。这样我们可以通过在 Redux 中间件中使用该操作符来达到更加精细的状态更新控制。
使用示例2：对状态变化实时计算
-- -------------------- ---- -------
------ - ------------ - ---- ------------------- -- -- ---------------- --- ------------ --
------ - -------- - ---- ------- -- -- ---- ----
------ - ---- ------------ - ---- ----------------- -- -- ---- ------ ---------------- --
------ - ------ - ---- ------------------- -- -- ---------------- --- ------ --
------ ----- ---------------- - --------- ------- -- -
------------- -- -----
------------------------ -- ---- ------
------------------ -- ----
------ -- - -- -------
----- ------ - --------------------
----- ------ - ---------------------- ----- -- -
-- ----- --- --------- -
------------- -- --
- ---- -- ----- --- ---------- -
-------------- -- --
- ---- -
-------------- -- --
-
------ -------
-- -
------- --
-------- --
-------- -
---
------ -
----- -----------------------
------
--
--
-
--
----- -------- - -------------
----------------
--
------ ------- ---------上面的代码演示了一个使用 redux-middleware-rxjs 的复杂示例：在状态变更时，我们可以使用 RxJS 操作符库中的 debounceTime 将状态变更操作进行时间间隔限制，然后对当前状态进行计算，最终将结果封装成一个新的 STATUS_UPDATE_COUNTS action 发送给 Reducer 进行状态更新。这样我们可以通过在 Redux 中间件中使用复杂的操作符库来实现对于复杂数据结构的计算和更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f70238a385564ab6703