Redux 中间件之 redux-observable 的使用方法-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发过程中，我们常常使用 Redux 来管理应用的状态，而 Redux 的中间件机制则允许我们在 action 被发起到达 reducer 之前，对其进行一些额外的处理。其中，redux-observable 是一款常用的中间件之一，它允许我们在 Redux 中使用 RxJS 进行异步操作，又能利用 RxJS 强大的操作符来处理数据流，以方便我们编写复杂的异步逻辑。

本文将详细介绍 redux-observable 的使用方法，并通过示例代码演示如何使用 redux-observable 进行异步数据处理。

redux-observable 的安装

在安装 redux-observable 之前，需要先安装 Redux 和 RxJS，可通过如下命令进行安装：

npm install --save redux rxjs

安装完成后，我们再通过 npm 安装 redux-observable 模块：

npm install --save redux-observable

redux-observable 的基本结构

redux-observable 是一个由 Epic 组成的数组，每个 Epic 接收一个 Observable，然后通过 RxJS 强大的操作符，处理传入的数据流来返回一个新的 Observable，最终将处理好的数据流发送给 Redux Store。其整体结构如下图所示：

(input: action$) => output: action$

其中，input 代表传入的数据流，output 则代表处理后返回的数据流，action$ 则代表传入的 action 流。

使用 redux-observable 处理异步操作

使用 redux-observable 处理异步操作的流程如下图所示：

用户触发一个 action，该 action 会被传到 redux-observable 中。
redux-observable 会判断该 action 是否需要进行异步操作。
如果需要进行异步操作，则会创建一个 Observable，用于处理异步逻辑。
Observable 处理异步逻辑后，将结果传回 redux-observable。
redux-observable 检查结果是否成功，将成功结果发送到 reducer。
reducer 根据 action 类型和数据更新 Store 中的状态。

示例代码

下面，我们通过一个获取 Github 用户信息的示例演示使用 redux-observable 进行异步数据处理：

// javascriptcn.com 代码示例
// 1. 导入必要的模块
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware, ofType } from 'redux-observable';
import { ajax } from 'rxjs/ajax';
import { map, switchMap } from 'rxjs/operators';

// 2. 定义 action 类型
const FETCH_USER = 'FETCH_USER';
const FETCH_USER_FULFILLED = 'FETCH_USER_FULFILLED';

// 3. 定义 action 创建函数
export const fetchUser = username => ({
  type: FETCH_USER,
  payload: username
});

export const fetchUserFulfilled = user => ({
  type: FETCH_USER_FULFILLED,
  payload: user
});

// 4. 定义 reducer，处理 action
const reducer = (state = {}, action) => {
  switch (action.type) {
    case FETCH_USER_FULFILLED:
      return {
        ...state,
        user: action.payload
      };
    default:
      return state;
  }
};

// 5. 定义 Epic，处理异步逻辑
const fetchUserEpic = action$ =>
  action$.pipe(
    // 过滤出 FETCH_USER 类型的 action
    ofType(FETCH_USER),
    // 切换到新的 Observable
    switchMap(action =>
      ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(
        // 将数据映射为 FETCH_USER_FULFILLED 类型的 action
        map(response => fetchUserFulfilled(response))
      )
    )
  );

// 6. 使用 createStore 创建 Store
const epicMiddleware = createEpicMiddleware();
const store = createStore(reducer, applyMiddleware(epicMiddleware));

// 7. 传入 Epic 给 redux-observable 处理
epicMiddleware.run(fetchUserEpic);

// 8. 触发 action
store.dispatch(fetchUser('lucas-yxj'));

上面的代码中，我们首先导入了必要的模块，定义了 action 类型和 action 创建函数，然后通过创建 reducer 处理接收到的 FETCH_USER_FULFILLED 类型的 action。

接下来，我们定义了一个 Epic fetchUserEpic，它会处理接收到的 FETCH_USER 类型的 action。在处理时，我们将该 action 切换到一个新 Observable 中，并通过 RxJS 操作符 map 将返回的数据映射为 FETCH_USER_FULFILLED 类型的 action，最终返回处理好的数据流并将结果存储在 Redux Store 中。

最后，我们使用 createStore 创建了一个 Store，并将我们刚刚定义的 Epic 通过 createEpicMiddleware 注入到 redux-observable 中，通过 store.dispatch 方法触发 action 从而异步获取数据。

总结

本文对 redux-observable 进行了详细的介绍，并通过示例代码演示了其使用方法。通过适当的使用 redux-observable，我们能够更加高效地管理异步操作，并应对复杂的前端开发需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6541af587d4982a6ebb46179