重学 Rxjs —— redux-observable

「这是我参与2022首次更文挑战的第38天，活动详情查看：2022首次更文挑战」

上一节我们使用了 Rxjs 实现了一个 redux，那么是不是有了 Rxjs 就不需要 redux 了呢？理论上 Rxjs 确实可以替代 redux 的工作，但是如果使用 Rxjs 替换 redux 就等于是放弃了 redux 生态了，redux 自身有一个庞大的社区，其中有很多好用的中间件和调试工具，从这个角度来看使用原生 redux 是优于使用 Rxjs 替代 redux 的。那么有没有一种方式能够既享受 redux 的优势，又能充分利用 Rxjs 呢？我们还是回到问题本身，redux 有哪里不好用。

我们都知道 redux 的原生 action 都是同步的，而前端开发有不可避免的有异步数据流，如果想在 redux 中处理异步数据就必须要使用异步中间件。最简单的中间件是 redux-thunk，但是这个中间件功能太过简洁，写起来比较麻烦，于是衍生出来一系列异步中间件，这些中间件各具特色，其中有一个基于 Rxjs 实现的中间件就是本文要说的 redux-observable。

redux-observable 的核心概念叫做 epic，这是一个类似 reducer 的函数，它接收一个 action 的 Observable 函数作为参数，返回一个 Observable，这个过程可以通过 Rxjs 的各种操作符来完成，这样就把核心业务逻辑交给 Rxjs，可以更好地发挥 Rxjs 的能力。

我们可以看一个应用感受一下：

const addEpic= action$ => action$.pipe(
  ofType('ADD_DATA'),
  mergeMap(()=> ajax({
    url: '/add',
    method:'POST',
    body: { id: action.payload }
  })),
  map(data => data.response),
  map(res =>({ type:'ADD_SUCCESS', payload: res }))
)

在上面的例子中，我们使用 ofType 来过滤类型，之后发送请求，获取结果，再返回一个新的 action$，虽然语法变成 Rxjs，但是其中的思想还是 redux 的一套，熟悉 redux 理解上面的代码应该也很容易。

上面只是举了一个非常简单的例子，用来说明使用 redux-observable 可以结合 redux 和 Rxjs 来发挥更大的作用，Rxjs 本身是一个比较独立自由的库，在实际开发中可以根据自己的需求合理使用 Rxjs。