React项目中Redux-Saga多重复action触发单API调用问题

你的问题核心是takeLatest无法阻止同时触发的多个Action发起重复API调用——因为takeLatest的逻辑是取消正在运行中的旧Worker，但如果多个Action几乎同时触发，旧Worker可能已经发起了API请求才被取消，导致重复请求。

下面提供两种可靠的解决方案：

方案一：使用takeLeading Effect #

takeLeading是Redux-Saga官方提供的Effect，它会确保同一时间只有一个对应Worker在执行：当有Action触发时，如果当前没有Worker在运行，就启动新的Worker；如果已有Worker在运行，直接忽略后续的Action，直到当前Worker执行完成。

修改你的代码如下：

function* testWorker() {
  try {
    // 这里执行你的API调用逻辑
    yield call(yourApiFunction);
  } catch (error) {
    // 按需处理API调用错误
    console.error('API请求失败:', error);
  }
}

function* testWatcher() {
  // 用takeLeading替代takeLatest
  yield takeLeading("CUSTOM_ACTION", testWorker);
}

这种方式简洁且符合Redux-Saga的设计规范，适合大部分场景。

方案二：手动维护请求锁 #

如果你需要更灵活的控制（比如根据特定条件决定是否忽略重复请求），可以手动维护一个标志位来标记请求状态：

// 标记是否正在执行API请求
let isRequestInProgress = false;

function* testWorker() {
  // 如果已有请求在进行，直接返回
  if (isRequestInProgress) return;
  
  isRequestInProgress = true;
  try {
    // 执行API调用
    yield call(yourApiFunction);
  } catch (error) {
    console.error('API请求失败:', error);
  } finally {
    // 请求完成（无论成功/失败）重置标志位
    isRequestInProgress = false;
  }
}

function* testWatcher() {
  // 使用takeEvery接收所有Action，由Worker内部判断是否执行
  yield takeEvery("CUSTOM_ACTION", testWorker);
}

这种方式的优势是可以根据业务需求扩展判断逻辑，比如区分不同参数的Action是否需要忽略。

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