Cancel a saga when an action is dispatched with redux-saga
<p>I start a timer for a stopwatch React component when a START action is dispatched:</p>

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

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

<pre><code>if(yield(take(STOP)) {
  yield cancel(timerTickWorkerSaga)
}
</code></pre>

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