読者です 読者をやめる 読者になる 読者になる

react-reduxのconnectとは何なのか

だいぶ端折っているので本家を読んだほうがいいです。

何なのか

簡単に言えばReactComponentをReduxのStoreに繋ぐもの。ReactComponent自体には手を加えず、Reduxに接続された新しいComponentを返す。ReduxではContainerと呼ばれる。

できること

引数として以下を渡すことができる。

  • mapStateToProps
  • mapDispatchToProps
  • mergeProps
  • options

特に重要なのはmapStateToPropsとmapDispatchToPropsである。

mapStateToProps

Storeが更新される度に呼ばれる。つまり、アプリの状態が変化したときのコールバック。Reactを単体で使用した場合、イベントが発生したらルートのComponentから末端のComponentまでバケツリレーしながら状態を変化させなければならないが、それをしないですむようになる。 mapStateToPropsが返す値はプレーンなObjectでなければならない。Storeを監視したくなければnull/undefinedを返せば良い。

mapDispatchToProps

ReduxComponentのイベントとReduxのActionを結びつける。

mergeProps

mapStateToProps()、mapDispatchToProps()、親コンポーネントのpropsの結果が渡される。つまり決定したpropsをここで改変することができる。省略すると Object.assign({}、ownProps、stateProps、dispatchProps) が呼ばれる。

options

connectorの振る舞いを変えることができる。

  • pure(Boolean) … propsが変更されていない場合、再レンダリングを行わない。デフォルトは true
  • areStatesEqual(Function) … pureのstateが等しいか判定基準となる関数。デフォルトは ===
  • areStatePropsEqual(Function) … pureのpropsが等しいか判定基準となる関数。デフォルトは shallowEqual
  • areStatePropsEqual(Function) … pureのmapStateToPropsが等しいか判定基準となる関数。デフォルトは shallowEqual
  • areMergedPropsEqual(Function) … pureのmergedPropsが等しいか判定基準となる関数。デフォルトは shallowEqual