javascript - 当使用 redux-saga 发送一个 Action 时取消一个 saga

Question

我在调度 START 操作时为秒表 React 组件启动计时器:

import 'babel-polyfill'
import { call, put } from 'redux-saga/effects'
import { delay, takeEvery, takeLatest } from 'redux-saga'
import { tick, START, TICK, STOP } from './actions'

const ONE_SECOND = 1000

export function * timerTickWorkerSaga (getState) {
  yield call(delay, ONE_SECOND)
  yield put(tick())
}

export default function * timerTickSaga () {
  yield* takeEvery([START, TICK], timerTickWorkerSaga)
  yield* takeLatest(STOP, cancel(timerTickWorkerSaga))
}
/*
  The saga should start when either a START or a TICK is dispatched
  The saga should stop running when a stop is dispatched
*/

当从我的组件调度 STOP 操作时，我无法停止 saga。我尝试在我的 worker saga 中使用 cancel 和 cancelled 效果:

if(yield(take(STOP)) {
  yield cancel(timerTickWorkerSaga)
}

以及第一个代码块中的方法，我尝试从观看服务中停止 saga。

Answer 1

Redux-Saga 现在有一个方法，叫做 race race。它将运行 2 个任务，但是当一个完成时，它会自动取消另一个。

• https://redux-saga.js.org/docs/advanced/RacingEffects.html

• watchStartTickBackgroundSaga 一直在运行

• 每次开始或滴答时，都会在 timerTickWorkerSaga 和监听下一个 STOP 操作之间开始竞赛。
• 当其中一个任务完成时，另一个任务被取消 这是种族的行为。
• race 中的名称“task”和“cancel”无关紧要，它们只是有助于代码的可读性

---

export function* watchStartTickBackgroundSaga() {
  yield takeEvery([START, TICK], function* (...args) {
    yield race({
      task: call(timerTickWorkerSaga, ...args),
      cancel: take(STOP)
    })
  })
}