CODEWITHSUNDEEP
javascriptreduxredux-saga
vamsiampolu
vamsiampolu

Reputation: 6622

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

I start a timer for a stopwatch React component when a START action is dispatched:

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
*/

I have trouble stopping the saga when the STOP action is dispatched from my component. I have tried using cancel and cancelled effects from within my worker saga:

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

as well as the approach in the first code block where I try and stop the saga from the watching service.

Upvotes: 25

Views: 31326

Answers (3)

rayd
rayd

Reputation: 370

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.

Upvotes: 15

Cory Danielson
Cory Danielson

Reputation: 14501

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 cancelled this 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)
    })
  })
}

Upvotes: 19

Marc
Marc

Reputation: 109

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);
}

Upvotes: 9

Related Questions