Redux Observable - JavaScript

Redux Observable 是一个基于 RxJS 的 Redux 中间件。它允许你使用 RxJS 来处理应用程序的副作用。在本文中，我们将探讨 Redux Observable 的核心概念以及如何使用它。

什么是副作用？

在 Redux 中，副作用指异步操作，例如 API 调用、读取本地存储、处理 DOM 事件等。这些操作可能会破坏 Redux 中的单向数据流，导致状态不一致。为了避免这种情况，我们需要使用 Redux 中间件来处理这些副作用。

为什么要使用 Redux Observable？

Redux Observable 提供了一种简单、灵活的方式来处理副作用。RxJS 的强大功能允许我们轻松地组合异步操作，从而编写可读性更强、更易于测试的代码。

核心概念

Redux Observable 的核心概念是 “epic”。一个 epic 是一个接收 action 流并返回 action 流的函数。它允许我们在 Redux 中组合异步操作。

一个简单的 epic 如下所示：

import { ajax } from 'rxjs/ajax';
import { ofType } from 'redux-observable';
import { map, mergeMap } from 'rxjs/operators';

const fetchUserEpic = action$ =>
  action$.pipe(
    ofType('FETCH_USER'),
    mergeMap(action =>
      ajax.getJSON(`/api/users/${action.payload}`).pipe(
        map(response => ({
          type: 'FETCH_USER_SUCCESS',
          payload: response
        }))
      )
    )
  );

这个 epic 会监听一个 FETCH_USER action。当它收到一个这样的 action 时，它会使用 RxJS 的 ajax 方法从 API 获取用户信息。然后，它将收到的响应转换为一个新的 FETCH_USER_SUCCESS action，并将其返回。

如何使用 Redux Observable

要使用 Redux Observable，首先需要设置 redux-observable 中间件。以 createStore 方法为例，示例如下：

import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import rootEpic from './epics';
import rootReducer from './reducers';

const epicMiddleware = createEpicMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(epicMiddleware)
);

epicMiddleware.run(rootEpic);

在这个示例中，我们首先导入了 createEpicMiddleware 方法和根 epic。然后，我们创建一个 epic 中间件，并将其与 applyMiddleware 方法一起传递给 createStore 方法。最后，我们通过 epicMiddleware.run 将根 epic 传递给 epic 中间件。

要编写 epic，我们需要创建一个接收 action 流并返回 action 流的函数。我们可以使用 ofType 操作符来监听特定的 action。

import { ofType } from 'redux-observable';

const myEpic = action$ =>
  action$.pipe(
    ofType('MY_ACTION'),
    ...
  );

我们可以使用 RxJS 操作符（如 mergeMap、switchMap、concatMap 和 exhaustMap）来组合异步操作。

import { ajax } from 'rxjs/ajax';
import { ofType } from 'redux-observable';
import { map, mergeMap } from 'rxjs/operators';

const fetchUserEpic = action$ =>
  action$.pipe(
    ofType('FETCH_USER'),
    mergeMap(action =>
      ajax.getJSON(`/api/users/${action.payload}`).pipe(
        map(response => ({
          type: 'FETCH_USER_SUCCESS',
          payload: response
        }))
      )
    )
  );

在这个示例中，我们使用 mergeMap 操作符来组合 ajax 方法和 map 操作符。这将创建一个从 FETCH_USER action 开始的 Observable，该 Observable 从 API 获取用户信息，并将响应转换为一个 FETCH_USER_SUCCESS action。

结论

Redux Observable 是一个非常强大、灵活的 Redux 中间件。它让我们可以轻松地处理异步操作，并组合它们来创建可读性更强的代码。如果你正在编写任何类型的 React 应用程序，并且需要进行异步操作，那么我建议你使用 Redux Observable。