前言
Redux-Observable 是 Redux 的中间件之一，它基于 RxJS，帮助我们处理异步数据流和副作用。本文将介绍 Redux-Observable 的简单使用，帮助前端开发者更好地掌握这个工具。
安装
npm install --save redux-observable rxjs
基本使用
在 Redux 应用中，一个 Action 是一个纯对象，用来描述一个将要发生的操作。例如，下面是一个 Action，用来表示用户登录的请求。
{
type: 'LOGIN_REQUEST',
payload: { email: 'john.smith@example.com', password: 'secret' }
}而 Epic 是一个普通的函数，接收一个 Observable 对象作为输入参数，输出一个 Observable 对象。在函数内部，可以通过使用 RxJS 提供的操作符，订阅某些 action，并在相应的条件下，返回新的 action 操作。 例如，下面是一个 Epic，用来处理用户登录请求的 Action。
-- -------------------- ---- -------
------ - ---- - ---- ------------
------ - --------- ---- ---------- - ---- -----------------
------ - ------ - ---- -------------------
----- --------- - ------- -- -------------
------------------------
--------------- --
----------------------- ---------------------
------------ -- --
----- ----------------
-------- --------
----
---------------- -- --
----- ----------------
-------- ------------------
---
-
-
--
------ ------- ----------ofType 操作符
ofType 操作符用来订阅指定的 Action 类型，接收一个可变参数。在上面的例子中，我们使用了 ofType('LOGIN_REQUEST')，订阅了 LOGIN_REQUEST 这个 action 类型。
mergeMap 操作符
mergeMap 用来处理异步流，接收一个函数作为参数，该函数返回一个 Observable 对象。在上述例子中，我们使用了 mergeMap，将接收到的登录请求卫星送到 Ajax 请求，并返回一个新的 Observable 对象。
map 操作符
map 操作符是 RxJS 的字符串转换函数，用来转换 Observable 流的值。在上述例子中，我们使用了 map 操作符，将 Ajax 请求的响应值转换成一个新的 Action。
catchError 操作符
catchError 操作符用来处理异常情况，在本例中响应错误时返回一个新的 Action。
绑定 middleware
将 redux-observable 与 Redux 框架绑定，可以使用 applyMiddleWare 函数。例如，下面是一个使用了以上代码的完整的 store。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------------- ------ --------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------ -------- ------------------------------- -- ------------------------------
使用上述代码，即可让 Redux-Observable 辅助 Redux 处理异步数据流和副作用。
总结
Redux-Observable 是一个强大的 Redux 中间件，用以处理异步数据流和副作用。尽管初学者可能需要花费一些精力去理解 RxJS 的操作符和编程范式，但 Redux-Observable 提供了强大的抽象层，能极大地简化异步流的处理。
示例代码
完整的 Redux-Observable 示例代码请参照我的 GitHub 仓库：redux-observable-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3f70448841e98940678f9