How to set up and subsequently cancel multiple watchers in redux-sagas
<p>Just trying to get my head around redux-sagas and running in to a problem setting up two watchers in a saga and then subsequently cancelling them.</p>

<p>Some background: I have a JSON Editor component where the saga handles calls to the backend API to load and save a JSON schema. The project is based on the <a href="https://github.com/mxstbr/react-boilerplate/" rel="nofollow">React Boilerplate</a> and so the structure of the application is pretty much exactly the same.</p>

<p>Here is the relevant code:</p>

<pre><code>export function* loadSchemaWatcher() {
  const action = yield take(LOAD_SCHEMA)
  yield call(loadSchema, action)
}

export function* saveSchemaWatcher() {
  while (true) {
    const action = yield take(SAVE_SCHEMA)
    yield call(saveSchema, action)
  }
}

export function* editorData() {
  const watcher = yield [
    fork(loadSchemaWatcher),
    fork(saveSchemaWatcher)
  ]

  yield take(LOCATION_CHANGE)
  yield watcher.forEach(task =&gt; cancel(task))
}

export default [
  editorData,
]
</code></pre>

<p>I assumed that <code>yield watcher.forEach(task =&gt; cancel(task))</code> would just loop over the array of <a href="https://yelouafi.github.io/redux-saga/docs/api/index.html#task" rel="nofollow">Tasks</a> but they aren't being cancelled. </p>