Redux 异步副作用管理：Thunk vs Saga vs Observable

在 Redux 生态系统中，处理异步逻辑（如 API 请求、WebSocket 连接）是核心挑战之一。redux-thunk、redux-saga 和 redux-observable 提供了三种不同的解决思路。本文将从实现方式、复杂流程控制、取消机制和测试难度四个维度进行深度对比。

🛠️ 基础实现：函数 vs 生成器 vs 流

redux-thunk 允许 action creator 返回一个函数，该函数接收 dispatch 和 getState 作为参数。

• 最接近原生 JavaScript 异步写法。
• 无需额外学习新的语法结构。

// redux-thunk
const fetchUser = (id) => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const user = await api.getUser(id);
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', error });
  }
};

redux-saga 使用 ES6 生成器函数（function*）和 yield 表达式。

• 通过 call、put 等效果指令描述意图。
• 异步流程看起来像同步代码。

// redux-saga
import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchUser(action) {
  try {
    const user = yield call(api.getUser, action.payload);
    yield put({ type: 'FETCH_USER_SUCCESS', payload: user });
  } catch (error) {
    yield put({ type: 'FETCH_USER_FAILURE', error });
  }
}

yield takeEvery('FETCH_USER_REQUEST', fetchUser);

redux-observable 基于 RxJS，Epics 是接收 action 流并返回 action 流的函数。

• 使用操作符（如 mergeMap、map）转换数据流。
• 适合处理连续的事件流。

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

const fetchUserEpic = (action$, state$) =>
  action$.pipe(
    ofType('FETCH_USER_REQUEST'),
    mergeMap(action =>
      api.getUser(action.payload).pipe(
        map(user => ({ type: 'FETCH_USER_SUCCESS', payload: user })),
        catchError(error => of({ type: 'FETCH_USER_FAILURE', error }))
      )
    )
  );

🔄 复杂流程控制：顺序与并发

redux-thunk 依赖原生 async/await 或 Promise.all。

• 控制并发需要手动编写 Promise 逻辑。
• 代码容易变得嵌套过深。

// redux-thunk
const fetchDashboard = () => async (dispatch) => {
  const [users, posts] = await Promise.all([
    api.getUsers(),
    api.getPosts()
  ]);
  dispatch({ type: 'DASHBOARD_LOADED', payload: { users, posts } });
};

redux-saga 提供内置的效果指令来处理并发和顺序。

• all 用于并行，sequence 用于顺序。
• 声明式地描述并发需求。

// redux-saga
import { all, call, put } from 'redux-saga/effects';

function* fetchDashboard() {
  const [users, posts] = yield all([
    call(api.getUsers),
    call(api.getPosts)
  ]);
  yield put({ type: 'DASHBOARD_LOADED', payload: { users, posts } });
}

redux-observable 使用 RxJS 操作符组合流。

• forkJoin 类似 Promise.all。
• concatMap 保证顺序执行。

// redux-observable
import { forkJoin, of } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';

const fetchDashboardEpic = (action$) =>
  action$.pipe(
    ofType('FETCH_DASHBOARD'),
    mergeMap(() =>
      forkJoin({
        users: api.getUsers(),
        posts: api.getPosts()
      }).pipe(
        map(results => ({ type: 'DASHBOARD_LOADED', payload: results }))
      )
    )
  );

🛑 取消机制：中断请求

redux-thunk 需要手动使用 AbortController 或标记位。

• 没有内置的取消机制。
• 需要额外代码管理请求状态。

// redux-thunk
let abortController;
const fetchUser = (id) => async (dispatch) => {
  if (abortController) abortController.abort();
  abortController = new AbortController();
  try {
    const user = await api.getUser(id, { signal: abortController.signal });
    dispatch({ type: 'SUCCESS', payload: user });
  } catch (e) {
    if (e.name !== 'AbortError') throw e;
  }
};

redux-saga 内置强大的取消支持。

• takeLatest 自动取消之前的任务。
• cancelled 判断是否被取消。

// redux-saga
import { takeLatest, cancelled, call } from 'redux-saga/effects';

function* fetchUser(action) {
  try {
    const user = yield call(api.getUser, action.payload);
    yield put({ type: 'SUCCESS', payload: user });
  } finally {
    if (yield cancelled()) {
      // 清理逻辑
    }
  }
}

yield takeLatest('FETCH_USER_REQUEST', fetchUser);

redux-observable 通过操作符自然处理取消。

• switchMap 自动取消内部未完成的 Observable。
• takeUntil 监听特定 action 来取消。

// redux-observable
import { switchMap, takeUntil } from 'rxjs/operators';

const fetchUserEpic = (action$) =>
  action$.pipe(
    ofType('FETCH_USER_REQUEST'),
    switchMap(action =>
      api.getUser(action.payload).pipe(
        takeUntil(action$.pipe(ofType('CANCEL_FETCH_USER')))
      )
    )
  );

🧪 测试难度：单元与集成

redux-thunk 测试最简单。

• 直接调用函数并模拟 dispatch。
• 无需特殊配置。

// redux-thunk test
const dispatch = jest.fn();
await fetchUser(1)(dispatch, () => ({}));
expect(dispatch).toHaveBeenCalledWith({ type: 'SUCCESS' });

redux-saga 需要遍历生成器。

• 测试每个 yield 点。
• 代码较繁琐但可控。

// redux-saga test
const iterator = fetchUser({ payload: 1 });
expect(iterator.next().value).toEqual(call(api.getUser, 1));
expect(iterator.next({ id: 1 }).value).toEqual(put({ type: 'SUCCESS' }));

redux-observable 需要测试 Observable 流。

• 通常使用 marble testing 或订阅断言。
• 学习曲线较陡。

// redux-observable test
const action$ = of({ type: 'FETCH_USER_REQUEST', payload: 1 });
const epic$ = fetchUserEpic(action$);
epic$.subscribe(action => {
  expect(action.type).toBe('SUCCESS');
});

📊 总结对比表

💡 最终建议

redux-thunk 是大多数项目的首选 🥇。特别是配合 Redux Toolkit 使用时，createAsyncThunk 进一步简化了样板代码。如果你的团队不熟悉生成器或响应式编程，不要过度设计。

redux-saga 适合复杂业务场景 🏢。当你需要处理复杂的取消逻辑、竞态条件或后台任务时，Saga 的结构化模型非常可靠。它在大型企业中依然有广泛使用。

redux-observable 适合流式数据场景 🌊。如果你的应用重度依赖 WebSocket、实时事件或复杂的用户交互流，RxJS 的组合能力是无与伦比的。但请确保团队有能力维护 RxJS 代码。

核心原则：不要为了技术而技术。从 redux-thunk 开始，只有在遇到无法优雅解决的复杂异步问题时，再考虑引入 Saga 或 Observable。