Edited at

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

More than 3 years have passed since last update.

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