Redux-Saga结合setInterval使用：如何及何时使用yield

刚从Thunk转Saga确实会遇到这类控制流的坑，我来帮你理清楚问题所在和正确的实现方式：

为什么你的几种尝试都失败了？ #

咱们先拆解下问题根源：Redux Saga的核心是生成器函数的受控执行，普通浏览器API比如setInterval完全不知道什么是生成器，所以你踩了这几个坑：

• 第一种方式：用call包裹setInterval本身没问题，但回调是普通函数——如果corewar.step()是需要Saga调度的副作用（比如带异步逻辑、需要dispatch action），直接调用就脱离了Saga的控制；如果step是生成器，那它根本不会被执行。
• 第二种/第三种方式：把回调写成生成器，但setInterval是浏览器原生API，它只会执行普通函数，不会去迭代生成器，所以里面的yield call完全不会生效。

正确的实现方案（推荐用Saga原生方式） #

Redux Saga提供了更贴合其设计理念的定时任务处理方式，用**无限循环 + delay**的组合替代setInterval，这样整个逻辑都在Saga的控制流内，能正常使用yield、支持取消和错误处理：

import { call, delay, fork, take, cancel } from 'redux-saga/effects';

function* corewarLoopSaga(processRate) {
  let operations = 0;
  // 无限循环模拟定时任务
  while (true) {
    // 一次性执行processRate次step
    for (let i = 0; i < processRate; i++) {
      // 用call调用corewar的step方法，确保Saga能处理副作用
      yield call([corewar, corewar.step]);
    }
    operations += processRate;
    // 等待1000/60毫秒，对应60fps的间隔
    yield delay(1000 / 60);
  }
}

// 在根Saga里启动这个任务，用fork让它后台运行不阻塞其他逻辑
function* rootSaga() {
  const corewarTask = yield fork(corewarLoopSaga, 你的processRate数值);
  
  // 可选：监听取消action，随时终止任务避免内存泄漏
  yield take('STOP_COREWAR');
  yield cancel(corewarTask);
}

如果你一定要用setInterval怎么办？ #

如果因为业务需求必须依赖setInterval，那你需要在回调里手动让Saga运行生成器，比如用runSaga把生成器纳入Saga的控制：

import { call, runSaga, take } from 'redux-saga/effects';
import store from './你的store实例';

// 定义单独的生成器处理step逻辑
function* executeSteps(processRate) {
  let operations = 0;
  for (let i = 0; i < processRate; i++) {
    yield call([corewar, corewar.step]);
  }
  operations += processRate;
}

function* intervalSaga(processRate) {
  // 启动setInterval，回调里手动运行生成器
  const runner = window.setInterval(() => {
    runSaga(
      { dispatch: store.dispatch }, // 传入Saga上下文
      executeSteps,
      processRate // 传递参数
    );
  }, 1000 / 60);

  // 监听取消信号，清除定时器
  yield take('STOP_COREWAR');
  window.clearInterval(runner);
}

你的两个疑问解答 #

1. 是否需要用call包裹这些函数？
   必须的！如果corewar.step是副作用函数（异步操作、需要调用其他Saga方法），用call包裹才能让Saga捕获它的执行，支持取消、错误处理等核心特性。就算step是普通同步函数，用call也能保持代码风格统一，方便未来扩展。

2. 若需包裹外层setInterval，如何定义作为call参数且自身需yield put或call的函数？
   不能直接把生成器传给setInterval——浏览器API不认识生成器。你有两个选择：

   • 优先用Saga原生的while(true) + delay循环，这是最符合Saga设计的方式，完全在控制流内，能正常使用yield。
   • 非要用setInterval的话，就在回调里用runSaga手动执行生成器，把Saga的上下文（比如dispatch）传进去，让生成器里的yield能被正确处理。

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