React Native登录/登出后接口调用次数翻倍问题（Redux Saga）

嘿，我看你遇到的这个问题很典型——每次登录登出循环后，触发action时接口调用次数翻倍，根源确实在你写的takeCancelableLatest辅助函数里。让我帮你拆解一下问题，然后给出修复方案。

问题出在哪？ #

你的takeCancelableLatest逻辑有个致命的循环叠加问题：每次登出后，你用spawn(parentSaga)重新启动了整个父saga（比如itemsGetAllSaga），而父saga里又会再次调用takeCancelableLatest创建新的订阅任务。这就导致每登录一次，就会多一组监听该action的saga任务。旧的任务虽然被cancel了，但新的任务会叠加在上面，最终触发action时，所有存活的任务实例都会执行，调用次数自然指数级增长。

举个例子：第一次登录有1组任务，登出再登录后变成2组，再循环一次就变成4组，对应你看到的8-16次调用。

修复后的辅助函数 #

我们需要调整逻辑，让单个takeCancelableLatest实例自己处理登录-登出的循环，而不是每次都重新启动父saga。这样就不会产生任务叠加了：

function* takeCancelableLatest(actionType, saga) {
  while (true) {
    // 启动takeLatest监听目标action
    const task = yield takeLatest(actionType, saga);
    // 等待用户触发登出动作
    yield take(AppActions.LOGOUT);
    // 取消当前的takeLatest任务，停止监听
    yield cancel(task);
    // 等待用户重新登录成功（token设置完成），进入下一轮监听循环
    yield take(UserActions.SET_TOKENS);
  }
}

调整父saga的使用方式 #

现在不需要再传入parentSaga参数了，父saga只需要启动一次，里面的每个takeCancelableLatest会自己管理生命周期：

export function* itemsGetAllSaga() {
  yield all([
    takeCancelableLatest(itemsGetAll, itemsGetAllWorker),
    takeCancelableLatest(itemsGetAllCommit, itemsPaginationWorker),
  ]);
}

为什么这样改就好了？ #

1. 单实例循环复用：用while(true)让每个takeCancelableLatest在登录-登出的流程里重复创建和取消takeLatest任务，不会每次登录都新增实例。
2. 避免父saga重复启动：父saga只在应用初始化时启动一次，不会因为登录登出被反复spawn，从根源上杜绝了任务叠加。
3. 明确的任务生命周期：每次登出都会cancel当前的takeLatest任务，确保旧任务不会再响应action；登录后再重新创建新的监听任务，保证只有一组活跃任务在工作。

额外验证建议 #

• 登出时记得清空Redux中用户相关的状态（比如token、用户信息），避免状态残留引发其他异常。
• 用Flipper的Saga插件实时观测任务的创建和取消状态，确认每次登录后只有一组活跃的监听任务，登出后任务被正确销毁。

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