Reduxについてまとめ（特にConnectについて！）

参考

yucatio.hatenablog.com

▼Reduxの導入 qiita.com

Reactの世界

・viewはユーザの動作(クリックなど)が発生したら、actionを作成してstoreに渡す(dispatchする)。

・storeは状態(state)を保持している。dispatchが呼ばれると、storeはactionとstateをreducerに渡す。

・reducerはactionとstateを受け取り、新たなstateを作成して返す。

・stateが更新されるとviewに通知され、再描画される

Reactの世界２

・ツリーの各ノードをコンポーネント(component)と呼ぶ。

・各コンポーネントは状態(state)を持っている。

・各コンポーネントは自身のstateのみを更新することができる。

・stateが更新されると自動的に再描画される。

・親から子に値(props)を渡すことができる。

・親から子に渡す値には、関数も含まれる。

・親は子の状態を直接(例えば、childComponentA.state.isActiveのように)参照することはできない。

・子コンポーネントが親から渡された関数を呼び出すことによって、子の状態を親に伝えることができる。

親から子に渡される値(props)をざっくり分けると、以下の2種類

①　数値、文字列、真偽値、配列、もしくはそれらで構成されているオブジェクト

⇨表示のために使用される

②　関数

⇨子コンポーネントのイベントを親コンポーネントに通知するために使用される

React-reduxの世界

・Reduxでは、状態(state)は基本的にstoreが持つ

・react-reduxの世界でも、stateはstoreが管理し、各コンポーネントはstateを(ほとんど)持たない

⇨何もしない状態だと、reactとreduxの世界は分断される⇨そこで、connect()の登場！！！

・Reactの各コンポーネントは、

　　表示のための値

　　stateを書き換える関数(dispatch)

・connectはReactコンポーネントとstoreをつないでくれる。

ここでは、ParentComponentとChildComponentの間に、connect()を行うContainerInMiddleを入れます。ContainerInMiddleはstoreからstateとdispatchを受け取って、子コンポーネントに必要な値を渡します。

connect()のを実際にする

・connect()の呼び出し方は以下のようになっていて、mapStateToPropsとmapDispatchToPropsという2つの関数を引数に取る

const ContainerInMiddle = connect(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent)

・mapStateToProps⇨　storeが持っているstateをpropsに入れて子コンポーネントに渡す

・mapDispatchToProps⇨　dispatchを呼び出す関数をpropsに入れて子コンポーネントに渡す

▼mapStateToPropsの実装

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

⇨state.todoの内容を、todoという名前で子コンポーネントに渡すよ、という意味。 　 このように書いておくと、子コンポーネント(上記の例ではChildComponent)でprops.todoで値が取得できるようになる

▼mapDispatchToPropsの実装

const mapDispatchToProps = dispatch => ({
  handleClick: id => dispatch(someAction(id))
})

⇨　id => dispatch(someAction(id))という関数を、handleClickという名前で子コンポーネントに渡すよ、という意味。このように書いておくと、子コンポーネント

・(上記の例ではChildComponent)でprops.handleClickで値が取得できるようになる

・react-reduxのconnect()は、stateとdispatch関数をpropsに入れて子コンポーネントに渡すという動作をする。

・これによって、stateの情報を取得したり書き換えたりできる。また、子コンポーネント側では、reduxを意識することなく実装ができる