3

redux-saga について頭を悩ませようとして、saga で 2 つのウォッチャーを設定してからキャンセルするという問題に遭遇しました。

背景: サガがバックエンド API への呼び出しを処理して JSON スキーマをロードおよび保存する JSON エディター コンポーネントがあります。このプロジェクトはReact Boilerplateに基づいているため、アプリケーションの構造はほとんど同じです。

関連するコードは次のとおりです。

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,
]

タスクyield watcher.forEach(task => cancel(task))の配列をループするだけだと思いましたが、キャンセルされていません。

4

1 に答える 1

8

forEach未定義を返すため、コードは機能しません。mapキャンセル効果の配列を返すものに置き換える必要があります

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

この効果を使用して、race配列効果全体を宣言的にキャンセルすることもできます。forkに置き換えられていることに注意してくださいcall

export function* editorData() {
  yield race([
    [
      call(loadSchemaWatcher),
      call(saveSchemaWatcher)
    ],
    take(LOCATION_CHANGE)
  ])
}
于 2016-06-30T03:13:00.440 に答える