redux-saga

https://gyazo.com/58054bf0c2eec3e960e9b0ecadb931de

類似

Module で使うAPI(Effect)

select

Stateから必要なデータを取り出す

put

Actionをdispatchする

生のactionをそのまま書くか、actionCreator()を引数に入れるか

async関数の中で使ってる

take系

take

Actionを待つ

イベントの発生を待つ

takeEvery

actionが実行されるたびに関数を実行する

各Moduleの一番下で使ってる

takeLatest

実行中の処理があったら中断し、新しく処理を開始する

call

引数で与えられた関数を実行し、Promiseの完了を待つ

Repositoryの中で通信する部分で使ってる

fork

別のタスクを開始する

join

別のタスクの終了を待つ

キーワード

spawn

sore内で使うAPI

all

配列で指定されたeffectを配列で実行する

createSagaMiddleware

saga middlewareを作成

redux-sagaはtestが容易。らしい

sagaはいくらでも複雑にできてしまうので、ガイドラインを定義したい

主な考え方

「すべてのActionはSagaを経由する！」

x action→reducer

o action→saga→reducer

考え方

Actionを下記のsagaの前、後に発火する2種類に分ける

System & User Action

Viewから発火するAction

ユーザーの操作など

Reducer Action

sagaが発行するaction

命名もわける

System & User Action

誰が、何を、どうした

ex.

USER_NEWS_ARTICLE_TOUCHED (ユーザーがニュース記事をタップした)

SYSTEM_APP_LAUNCHED (システムが、アプリケーションの起動を完了した)

Reducer Action

sagaが、何を、どうした

ex.

REDUCER_VIEW_NEWS_FETCH_DONE (sagaが、ニュースデータの取得を完了した)

sagaなどのmiddlewareを使わずに非同期処理をする

型をつける

参考