Redux-Saga 任务取消机制深度解析-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00354/article/details/148362090

Redux-Saga 任务取消机制深度解析

redux-saga 项目地址: https://gitcode.com/gh_mirrors/red/redux-saga

前言

在现代前端应用中，异步操作管理是一个核心课题。Redux-Saga 作为 Redux 的中间件，通过 Generator 函数和 Effects 的概念，为我们提供了优雅的异步流程控制方案。其中，任务取消机制是 Redux-Saga 的重要特性之一，它允许我们在特定条件下中止正在执行的异步任务。

任务取消的基本概念

Redux-Saga 中的任务取消机制类似于操作系统中进程管理的概念。当我们 fork 一个任务后，可以通过 cancel Effect 来中止该任务的执行。这种机制在以下场景特别有用：

用户手动取消长时间运行的操作
组件卸载时需要清理后台任务
竞态条件下只需要最快完成的结果

基础示例解析

让我们从一个典型的后台同步任务示例开始：

function* bgSync() {
  try {
    while (true) {
      yield put(actions.requestStart());
      const result = yield call(someApi);
      yield put(actions.requestSuccess(result));
      yield delay(5000);
    }
  } finally {
    if (yield cancelled()) {
      yield put(actions.requestFailure('Sync cancelled!'));
    }
  }
}

function* main() {
  while (yield take('START_BACKGROUND_SYNC')) {
    const bgSyncTask = yield fork(bgSync);
    yield take('STOP_BACKGROUND_SYNC');
    yield cancel(bgSyncTask);
  }
}

这个示例展示了：

通过 START_BACKGROUND_SYNC 动作启动后台同步任务
任务会每隔5秒执行一次API调用
当接收到 STOP_BACKGROUND_SYNC 动作时取消任务
在 finally 块中检查任务是否被取消，并执行相应的清理操作

取消机制的实现原理

Redux-Saga 的取消机制基于 Generator 函数的特性实现：

当调用 cancel(task) 时，实际上会触发 Generator 的 return() 方法
这使得 Generator 直接跳转到 finally 块执行
在 finally 块中可以通过 cancelled() Effect 检查任务是否被取消

取消的传播行为

Redux-Saga 的取消具有向下传播的特性：

当取消一个任务时，会同时取消该任务当前阻塞的所有子 Effect
这种传播会一直向下直到最底层的 Effect
任何通过 join(task) 等待该任务的代码也会被取消

这种设计确保了取消操作的彻底性，避免了"僵尸"任务的存在。

自动取消场景

除了手动取消外，Redux-Saga 在以下场景会自动触发取消：

race Effect：在竞速条件下，所有未完成的任务会被自动取消
parallel Effect（即 all）：当其中一个子 Effect 失败时，其他子 Effect 会被自动取消

测试技巧

测试涉及取消的 Saga 时，可以使用 createMockTask 工具：

import { createMockTask } from '@redux-saga/testing-utils';

describe('main saga', () => {
  it('should cancel bgSync task on STOP_BACKGROUND_SYNC', () => {
    const gen = main();
    gen.next(); // 开始监听START_BACKGROUND_SYNC
    
    const mockAction = { type: 'START_BACKGROUND_SYNC' };
    gen.next(mockAction); // 处理START_BACKGROUND_SYNC
    
    const mockTask = createMockTask();
    gen.next(mockTask); // fork bgSync
    
    gen.next(); // 开始监听STOP_BACKGROUND_SYNC
    
    expect(gen.next().value).toEqual(cancel(mockTask));
  });
});