Comment mettre en place et ensuite annuler plusieurs observateurs dans redux-sagas ?

Question

J'essaie juste de me faire une idée de redux-sagas et je me heurte à un problème de mise en place de deux observateurs dans une saga, puis de leur annulation.

Un peu de contexte : J'ai un composant éditeur JSON où la saga gère les appels à l'API backend pour charger et sauvegarder un schéma JSON. Le projet est basé sur le React Boilerplate et donc la structure de l'application est à peu près la même.

Voici le code correspondant :

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 => cancel(task))
}

export default [
  editorData,
]

J'ai supposé que yield watcher.forEach(task => cancel(task)) bouclerait simplement sur le tableau de Tâches mais ils ne sont pas annulés.

Answer 1

Votre code ne fonctionne pas car forEach renvoie une valeur indéfinie. Vous devrez le remplacer par map qui retournera un tableau d'effets d'annulation

yield watcher.map(task => cancel(task))

Vous pouvez également utiliser le race pour annuler l'effet de tableau entier de manière déclarative. Notez que fork a été remplacé par call

export function* editorData() {
  yield race([
    [
      call(loadSchemaWatcher),
      call(saveSchemaWatcher)
    ],
    take(LOCATION_CHANGE)
  ])
}