Reduxにおけるconnectを理解する

connect()の引数

connectの呼び出し方はmapStateToPropsとmapDispatchToPropsという2つの関数を引数に取ります。

それぞれ以下の役割がある

データ型	用途
mapStateToProps	storeが持っているstateをpropsに入れて子コンポーネントに渡す
mapDispatchToProps	dispatchを呼び出す関数をpropsに入れて子コンポーネントに渡す

以下のコードの場合、mapStateToPropsにはcreateStore()の引数である、reducerで新しく作られたstateをpropsに入れてあげてコンポーネントに渡しています。

mapDispatchToPropsにはaction関数をpropsに入れてあげてコンポーネントに渡しています。

const mapStateToProps = state => ({ events: state.events })

const mapDispatchToProps = ({ readEvents })

export default connect (mapStateToProps, mapDispatchToProps)(EventsIndex);

まとめ

本来なら親などから引き継いでもらったり、繋いでもらったりしないといけないところ、「mapStateToProps」と「mapDispatchToProps」を使うことでそんなことは一切なしで、使いたいコンポーネントからすぐにPropsとして使うことができる。