Redux-Saga技术问题：触发CANCEL动作时如何取消所有其他Saga？

我来帮你搞定这个需求——要实现触发CANCEL动作时取消所有运行中的业务saga（比如getOneSaga、getTwoSaga）及其对应的API调用，我们可以利用Redux Saga的任务管理能力（fork、cancel）或者race效果来实现。下面是两种实用的方案：

方案一：利用race效果自动取消（简洁版） #

race效果会同时等待多个分支，当其中一个分支完成时，自动取消其他所有未完成的分支。我们可以把业务saga组和CANCEL动作监听作为两个分支：

import { all, takeLatest, take, race } from 'redux-saga/effects';
import ActionTypes from './your-action-types';

export default function* rootSaga() {
  // 同时运行业务saga组和等待CANCEL动作
  yield race({
    // 业务saga分支：启动所有takeLatest监听
    businessSagas: all([
      takeLatest(ActionTypes.GET_ACTION_ONE, getOneSaga),
      takeLatest(ActionTypes.GET_ACTION_TWO, getTwoSaga),
    ]),
    // 取消分支：等待CANCEL动作触发
    cancelTrigger: take(ActionTypes.CANCEL),
  });
  
  // 当CANCEL动作被dispatch时，race会自动取消businessSagas分支的所有任务
}

方案二：显式fork并取消任务（更直观可控） #

如果你需要更明确的任务控制，可以先fork每个业务saga监听，保存任务引用，收到CANCEL动作后逐个取消：

import { all, takeLatest, take, fork, cancel } from 'redux-saga/effects';
import ActionTypes from './your-action-types';

export default function* rootSaga() {
  // 启动每个takeLatest监听，并保存任务实例
  const runningTasks = yield all([
    fork(takeLatest, ActionTypes.GET_ACTION_ONE, getOneSaga),
    fork(takeLatest, ActionTypes.GET_ACTION_TWO, getTwoSaga),
  ]);

  // 等待CANCEL动作触发
  yield take(ActionTypes.CANCEL);

  // 取消所有运行中的业务saga任务
  yield all(runningTasks.map(task => cancel(task)));
}

处理API调用的取消 #

不管用哪种方案，你都需要在具体的业务saga中通过cancelled()检查取消状态，进而终止正在进行的API请求。以Axios为例，我们可以用Cancel Token来实现：

import { call, put, cancelled } from 'redux-saga/effects';
import axios from 'axios';
import ActionTypes from './your-action-types';

function* getOneSaga(action) {
  // 创建Axios Cancel Token
  const cancelSource = axios.CancelToken.source();
  
  try {
    // 发起带Cancel Token的API请求
    const response = yield call(axios.get, '/api/resource-one', {
      cancelToken: cancelSource.token,
    });
    
    // 请求成功：dispatch成功动作
    yield put({
      type: ActionTypes.GET_ACTION_ONE_SUCCESS,
      payload: response.data,
    });
  } catch (error) {
    // 区分普通错误和取消错误
    if (axios.isCancel(error)) {
      console.log('API请求已取消:', error.message);
    } else {
      // 请求失败：dispatch失败动作
      yield put({
        type: ActionTypes.GET_ACTION_ONE_FAILURE,
        error: error.message,
      });
    }
  } finally {
    // 检查当前saga是否被取消
    if (yield cancelled()) {
      // 触发API请求取消
      cancelSource.cancel('Saga已被全局取消');
    }
  }
}

关键说明： #

• 当CANCEL动作被dispatch时，根Saga会取消所有业务saga的任务，此时业务saga会进入finally块，通过cancelled()判断取消状态，进而终止API请求。
• takeLatest本身会自动取消之前同名动作的saga实例，但这里的全局取消是针对所有指定的业务saga，不受动作类型限制。

内容的提问来源于stack exchange，提问作者Sergei Klinov