前言
在前端开发中，状态管理是一个非常重要的一环，其中 Redux 是最主流的状态管理库之一。而在 Redux 的使用过程中，Middleware 更是一个必不可少的模块。
本篇文章将介绍一款基于 RxJS 的 Redux Middleware 包 redux-rx-middleware，它可以用来处理 Redux Action 中的异步逻辑，并且代码简洁易读。
安装
使用命令 npm install --save redux-rx-middleware 即可安装。
使用
配置 Middleware
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------------- ------ - ------------------ - ---- ---------------------- ------ - ----------- - ---- ------------- ------ - -------- - ---- ---------- ----- ------------ - --------------------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ----------------------------- --------------- -- -----------------------------
上面的代码中，我们引入了 createRxMiddleware 方法，并将其作为 Middleware 应用在了 Redux Store 中。同时，我们还使用了 redux-observable 库中的 createEpicMiddleware 方法来运行 Epic。
创建 Epic
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------
------ - ------ - ---- -------------------
------ - --------- - ---- -----------------
------ - ---- - ---- ------------
------ - ----------- ------- - ---- ------------
----- ------------- - ------------------ --
-------------
-------------------
---------------- --
--------------------------------------------------------------------
------------ -- ------------------
-
-
-
--
------ ----- -------- - ----------------------------上面的代码中，我们使用了 createEpic 方法来定义 Epic。该方法接受一个参数，即为一个 Observable，用于监听 Action，然后进行异步逻辑的处理。在这个例子中，我们使用 ajax 发送请求，并通过 map 操作符将请求结果转化成一个 Action。
发送 Action
在组件中，我们仍然可以像平常一样使用 dispatch 方法来发送 Action：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ---- ------- --------- -
------------------- -
----- - ---------- ----- - - -----------
-----------------
-
-------- -
----- - ---- - - -----------
------ -
-----
----------------------
-----------------------
------
--
-
-
------ ------- --------
----- -- -- ----- ---------- ---
- --------- -
--------结语
通过上述示例，我们可以看出，redux-rx-middleware 相比于 Redux 的原生 Middleware 在异步逻辑的处理上更为方便和简洁，同时它也利用了 RxJS 的强大功能，使得代码更加易读易懂。
因此，如果你在使用 Redux 制作前端应用时，面对异步逻辑处理时常常感到困扰，那么可以尝试使用 redux-rx-middleware 这款插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a35