【Redux】mapStateToProps

Redux

鬼門connect攻略① mapStateToProps

connectの引数がわからん、ということで調べました

鬼門だらけのconnectさん↓

connect(
  mapStateToProps
  mapDispatchToProps
  mergeProps
)(myComponent)

まずはmapStateToProps

mapStateToProps is 何

「State」を「ToProps」 State情報をPropsとして扱うことができるということ。

mapStateToPropsとmapDispatchToPropsの理解の仕方 | ocws BLOG

これ、本来stateではできないことを
mapStateToPropsではできるようにします、という宣言として
見ると一気にしっくりきました

【React】state - hasyrails’s blogでメモした通り、
reactでは本来、
stateは
・コンポーネント内に持っている情報
・変更不可
なものですが
connectでstoreとcomponentを行き来させることで
コンポーネントだけが持っているだけでなく
propsのように行き来させることができるようにするよ、という
宣言をしているんですね。

具体的な使いかた

公式

function mapStateToProps(state, ownProps?)

Connect: Extracting Data with mapStateToProps · React Redux

stateをpropsのように変換するメソッドなのでstateを引数とする。

ownPropsはstateをpropsへ変換する条件等を指定することができる。

（例）：filter条件を指定したり ↓ React + Redux の基本的な使い方 - KDE BLOG