Reactを学ぶ6(Redux)

以下を参考に。 今から始めるReact入門 〜 Redux 編: Redux 単体で状態管理をしっかり理解する

作業時間：3時間 経過時間：24時間

データフロー

createStore()はReducerとデータの初期値を渡す store.getState()はstateの取得 store.dispatch()を呼ぶと、subscribe()が発火する。 reducerの実行タイミングは、createStore()とdispatch()の時になる。 reducerを複数扱う場合は、combineReducersでreducerをオブジェクト形式で集約し、各reducerにactionを渡す。

middleware

Reduxでmiddlewareと組み合わせる。 reducerの前に処理をしたいケースがある際に利用する。（APIのデータ取得、ログ出力...) applyMiddleware()で引数に関数を渡す。 以下のapplyMiddlewareで呼ぶ関数ではカリー化で渡している。

dispatchのあとの処理順序は、middleware、reducerとなっている。 なので、middlewareで呼んだ関数でreducerを呼ぶ？必要がある。 ※middlewareでは、actionに干渉できてしまうので、副作用を持ってしまう可能性がある。

//reducerが呼ばれない
 const logger = (store) => (next) => (action) => {
   console.log("action fired", action);
}
const middleware = applyMiddleware(logger);
...
const store = createStore(reducer, 1, middleware);
//reducerが呼ぶ
 const logger = (store) => (next) => (action) => {
   console.log("action fired", action);
   next(action);
}
const middleware = applyMiddleware(logger);
...
const store = createStore(reducer, 1, middleware);

　 複数のmiddlewareを定義する場合は、applyMiddleware()で定義した関数を渡せばいい。

非同期

dispatch()に関数を渡して、その関数内で非同期処理を行う。 通常のままだとmiddlewareでは、Actionオブジェクトを受け取ることを期待している。 なので、redux-thunkを使用しmiddlewareで関数を受け取れるようにする。 middlewareの先でdispatchメソッドを受け取り、非同期関数を実行する。

redux-promiseでも非同期を解決できる。 そして、redux-sageでも...。 だけど、どんな違いがあるかは分かっていない。

何かしらをapplyMiddlewareへの渡し方が違うが、渡すことは確かだった。

疑問

cookieとかの方面でstore管理しなかったの何故だろうとおもったけど、書き込み権限しかないからか。