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

  • 8
    Like
  • 0
    Comment

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 に反映される