最近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) {
// ... 何らかの処理
}
まとめ
少しだけ理解が深まったような... 更に曖昧になったような...
訳がかなり怪しいので間違っている点があれば指摘していただけるとありがたいです。