vamsiampolu vamsiampolu - 1 month ago 11
Javascript Question

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.

Answer

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.