Cancel a saga when an action is dispatched with redux-saga

Looks like a few things are going on here:

1. The cancel side effect takes a Task object as its argument. What you're passing into it in the code above is just the GeneratorFunction that creates the saga/Generator object. For a great intro to generators and how they work, check out this article.

2. You're using yield* before the takeEvery and takeLatest generators. Using yield* will spread the whole sequence. So you can think of it like this: that it's filling in the line

   yield* takeEvery([START, TICK], timerTickWorkerSaga)

   with

   while (true) {    const action = yield take([START, TICK])    yield fork(timeTickWorkerSaga, action)}

   And I don't think this is what you're going for, because I believe this will end up blocking the second line of your timerTickSaga. Instead you probably want:

   yield fork(takeEvery, [START, TICK], timerTickWorkerSaga)

   This forks off the takeEvery effect so it doesn't block the next line.

3. The second argument you're passing into takeLatest is just an object - a CANCEL effect object. The second argument to takeLatest should actually be a GeneratorFunction, which will be run when an action matching the STOP pattern is dispatched to the Redux store. So that should really be a saga function. You want this to cancel the fork(takeEvery, [START, TICK], timerTickWorkerSaga) task so that future START and TICK actions will not cause the timerTickWorkerSaga to run. You can achieve this by having the saga run a CANCEL effect with the Task object that resulted from the fork(takeEvery... effect. We can the Task object as an additional argument to the takeLatest saga. So we end up with something along the lines of:

   export default function * timerTickSaga () {    const workerTask = yield fork(takeEvery, [START, TICK], timerTickWorkerSaga)    yield fork(takeLatest, STOP, cancelWorkerSaga, workerTask)}function* cancelWorkerSaga (task) {    yield cancel(task)}

For additional reference check out the task cancellation example in the redux-saga docs. If you look in the main saga there, you'll see how the fork effect yields a Task object/descriptor that is used further down when yielding the cancel effect.

Redux-Saga has a method for this now, it's called race race. It will run 2 tasks, but when one finishes, it will automatically cancel the other.

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

• watchStartTickBackgroundSaga is always running

• Every time there's a start or tick, start a race between timerTickWorkerSaga and listening for the next STOP action.
• When one of those tasks finishes, the other task is cancelledthis is the behavior of race.
• The names "task" and "cancel" inside of race do not matter, they just help readability of the code

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

The answer from rayd is very correct but a bit superfluous in the way that takeEvery and takeLatest internally are doing a fork.You can see the explanation here:

So the code should be:

export default function* timerTickSaga() {    const workerTask = yield takeEvery([START, TICK], timerTickWorkerSaga);    yield takeLatest(STOP, cancelWorkerSaga, workerTask);}function* cancelWorkerSaga(task) {    yield cancel(task);}