redux-saga用語 #redux-saga

最近redux-sagaについて調べていたのだが、用語の理解が曖昧だったので公式ドキュメントのGlossaryを雑に訳してみた。

Effect

effectとはsaga middlewareによって実行される命令を含むプレーンなJavaScriptオブジェクトです。
redux-sagaライブラリが提供するファクトリ関数を使うことでeffectを生成できます。例えば、call(myfunc, 'arg1', 'arg2')が返すeffectをyieldすることによって、middlewareに対してmyfunc('arg1', 'arg2')を呼び出して結果をGeneratorに返すよう指示します。

Task

taskはバックグランドで走るプロセスのようなもので、redux-sagaを使ったアプリケーションでは複数のtaskが並列に動作します。fork関数を使うと下記のようにtaskを生成できます。

function* saga() {
  ...
  const task = yield fork(otherSaga, ...args)
  ...
}

Blocking/Non-blocking call

Blocking callはSagaがeffectをyieldしてその結果を待ってから次の命令を再開すること、またNon-blockingはeffectをyieldしたあとすぐに処理を再開することを指します。
例

function* saga() {
  yield take(ACTION)              // Blocking: actionが来るのを待つ
  yield call(ApiFn, ...args)      // Blocking: ApiFnが終わるのを待つ (ApiFnがPromiseを返す場合)
  yield call(otherSaga, ...args)  // Blocking: otherSagaが終わるのを待つ

  yield put(...)                   // Blocking: 非同期にdispatchする (Promise.thenを使用)

  const task = yield fork(otherSaga, ...args)  // Non-blocking: otherSagaの終了を待たない
  yield cancel(task)                           // Non-blocking: すぐに再開する
  // または
  yield join(task)                              // Blocking: taskが終わるのを待つ
}

Watcher/Worker

独立したSagaを使って制御フローを組織化する方法を示します。
- The watcher: dispatchされたactionを監視して、actionごとにworkerをforkする
- The worker: actionを処理して終了する
例

function* watcher() {
  while (true) {
    const action = yield take(ACTION)
    yield fork(worker, action.payload)
  }
}

function* worker(payload) {
  // ... 何らかの処理
}

まとめ

少しだけ理解が深まったような... 更に曖昧になったような...
訳がかなり怪しいので間違っている点があれば指摘していただけるとありがたいです。