Redux
後述のsingle storeだとかTheree Principlesだのあるが、何しろこれ
なるべく(状態を持たない)関数の組み合わせで設計する感じになるので、テストが書きやすい
Reactと一緒に用いられることが多いが、別にReactに依存しない React AppでState管理を分離できることで、React ComponentもPure Function化してテストとか書きやすくなる
ちょっと嘘かも。Stateに関連するContainerとPureなComponentに分けることができるということ
Redux is a predictable state container for JavaScript apps.
Redux library itself is only a set of helpers to “mount” reducers to a single global store object.
3つの原則
Single source of truth
The state of your whole application is stored in an object tree within a single store.
State is read-only
The only way to change the state is to emit an action, an object describing what happened.
viewやネットワーク通信系のコールバックから直接stateを更新しない
Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.
stateとactionを引数に取って、next stateを返す関数(群)
stateオブジェクトを変更するのではなく、新しいstateオブジェクトを返す
reducerの中でdataを変更するのはstrongly discouragedである
pure functionに保つ
引数を変えるのはダメ
副作用のある処理(API呼び出しとかrouting transitions)もダメ
Date.now()とかMath.random()みたいなnon-pure functionを呼ぶのもダメ
Action
applicationからstoreにdataを送るpayload
They are the only source of information for the store.
You send them to the store using store.dispatch()
JavaScriptのplainなobject
typeを必ず持つ。それ以外は自由。
Action Creators
actionを作って返す関数群
返る結果をdispatchする
traditionalなFluxだと、よくaction creatorの中でdispatchまでされるが、Reduxではそうではない
actionを作って返すだけのシンプルな関数なのでテストが書きやすい
非同期処理や副作用のある処理もAction Creatorsで
Store
applicationのstateを持つ
store.dispatch(action)でstateを更新する
store.dispatch(atcion)はappのどこからでも呼べる。(e.g. コンポーネント、非同期処理のコールバック、etc...)
むしろ、API Callとか副作用のある処理とかは、dispatchする前に行う
createStore()にreducerを渡すと作れる
Fluxとの違いとして、Dispatcherの概念が無い Redux自体はReactには依存していないので、単体で使えるものだが、ReactやFluxがあったからこそ出現したものではあろう