Redux 登場人物の説明箇条書き

redux-react のチュートリアル的なものをチラチラ見ながら、分からなかった事を調べたメモ。
誤り等が有るかも知れない。今後も更新していくかも知れない。間違いを放置したくないので指摘は歓迎です。

Store

• state tree を保持する
• Store はクラスではなく単なるオブジェクト
• createStore で作成される
• Provider の store 属性に渡される

state

• アプリケーションの状態を保持するプレーンな値もしくはオブジェクト
• state を変更する唯一の手段は action を引数に渡して dispatch すること
• つまり dispatch 関数を実行する事でしか変更出来ない

dispatch(action)

• dispatch(action)
• state を変更する唯一の方法
• 引数に action を渡す
• 実行すると reducer 関数が全て呼び出される

getState()

• 現在の state tree を返す
• 最後に reducer から渡された state と一致する

Reducer

• reducer(state, action) => newState
• プレーンな関数
• 副作用があってはいけない
• 同じ引数なら毎回同じ返り値でなくてはいけない ( Date.now() とかダメ )
• 引数に state と action を受け取る
• 返り値は state ただし既存の state を変更せずに新しく作る
• dispatch すると全ての reducer は実行される
• reducer は渡される action の action.type から処理すべきかどうか判断して state を返す
• createStore する(Providerの初回配置時?)と実行されて、初回の state が決定される

combineReducers(reducers)

• combineReducers で複数の reducer 関数をまとめる事ができる
• combineReducers の引数となる形式は { stateName: reducerFunc, stateName2: reducerFunc2 }
• reducerFunc に渡される state は sate.stateName になる
• まとめられた reducer は createStore の引数にできる

Action

• プレーンなオブジェクト
• type プロパティが必須
• type プロパティでどんなアクションが発生したかを判別する(reducerで)
• それ以外のプロパティは任意
• dispatch 関数の引数として渡される

(用語) Presentation Components, Container Components

Presentational and Container Components

• Presentation Components
  • 普通の React.Component
  • 見ためを規定する ( タグ構造とか )
  • データがどこから来るのかは知らない
  • どうやってデータを変更するかも知らない
  • Redux へ依存してない
  • React.Component を継承したクラスを定義して作成する
• Container Componentns
  • 見た目は関知しない
  • データを提供する ( mapStateToProps で props に渡すデータを作成する )
  • データを変更する手段を提供する ( mapDispatchToProps で dispatch の実行を受け持つ property を作る )
  • Presentation Componentns のクラスに mapStateToProps と mapDispatchToProps を connect する事で作成する

connect(mapStateToProps, mapDispatchToProps)(component)

• Presentation Components を作成する関数
• Redux の世界と React の世界を繋げる、と言われる
• component の props に mapStateToProps と mapDispatchToProps をバインドする
  • mapStateToProps で Presentation Components に props 経由でデータを提供する
  • mapDispatchToProps で Presentation Components に props 経由で dispatch する手段を提供する
• mapStateToProps
  • 引数に state が渡される関数
  • 戻り値はオブジェクトで component の props にバインドされる
  • { propName: propValue, propName2: propValue2 } の形式
  • component.prop.propName が propValue となる
• mapDispatchToProps
  • 引数に dispatch 関数が渡される関数
  • 戻り値はオブジェクトで component の props にバインドされる
  • { propName: dispatchFunc, propNam2: dispatchFunc2 }
  • dispatchFunc の中で mapDispatchToProps 関数の引数に渡された dispatch を使って dispatch の処理する
  • component の中で特定のイベントが発生した際に dispatch させたい場合、任意の場所で dispatchFunc() を実行させてその中で dispatch する
• Store#subscribe() でも同じ事が出来るらしいが connect なら簡単に出来るらしい

処理の流れ

1. createStore する
2. reducer が初回実行される
3. reducer 初回実行により初期状態の state が決定される
4. Provider の store 属性に store を渡す
5. 何かイベントが発生する
6. 対応する action を生成する
7. connect で受け取った dispatch する為のメソッド経由で action を dispatch する
8. reducers が全て実行される
9. 各 reducer は action.type を見て処理すべきなら state を返す
10. state が Component に反映される