redux-sagaとは？
Reduxにタスクという概念を持ち込むためのライブラリです。タスクというのはOSのプロセスのようにそれぞれが独立しており並行して動きます。
メリット
- 小さなコードに分割できる。
- コードが再利用が可能になる。
設定
redux-sugaはreduxのミドルウェアなのでStoreに下記のように登録する必要があります。
|
1 2 3 4 5 6 7 8 |
import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import rootSaga from './sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore(reducers, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(rootSaga); |
タスクを書くためのモジュール
select
Stateから必要なデータを取り出す。こんな感じで取り出せます。
|
1 |
const { 変数 } = yield select(state => state.取り出したい値) |
put
Actionをdispatchする。下記例では、APIにリクエストした戻り値であるpayloadを「A」というactionにdispatchしています。
|
1 |
yield put(A(payload)); |
take
Actionを待つ、イベントの発生を待つ。下記例では「REQUEST_XXX」Actionがdispatchされるのを待ちます。
|
1 |
const action = yield take(REQUEST_XXX); |
takeLatest
actionが複数回dispatchされる可能性がある時に、現在実行中の最新のsagaのみ取得する処理
|
1 |
takeLatest(Actionのタイプ, handleXXX) |
call
Promiseの完了を待つ。下記のような感じでAPIの呼び出しに使われます。
|
1 |
const payload = yield call(api.getXXX, 引数) |
all
Promise.Allとと同じ動きです。
|
1 2 3 4 5 6 7 |
import { all } from 'redux-saga/effects'; export default function* rootSaga() { yield all([ ...XXXSagas, ]); }; |
fork
別タスクを開始する。下記例では「handleXXX」というタスクを起動している。
|
1 |
yield fork(handleXXX) |
join
別タスクの終了を待つ。
この記事へのコメントはありません。