React-Reduxのconnect()関数についてまとめ

今回は、現在勉強中のReact-Reduxで使用するconnect関数について書きたいと思います。

そもそもReduxとは何か？

Reactでは、各コンポーネントでstateを管理します。
Reduxとは、Reactとは別の場所であるstoreという場所で、このstateを一括管理できるライブラリーの名称です。

connect関数とは？

上記で述べた通り、stateを一括管理しているReduxのstoreは、Reactとは別の場所にあるので、Componentとstoreを繋げる必要があり、そのためにconnect関数を使います。

具体的なconnect関数の役割

1. storeからcomponentに必要なstateを取得する。
2. storeのstateを書き換えられるようにする

実際に構文をみてみると以下のようになります。

connect(mapStateToProps,mapDispatchToProps)(component)

1. mapStateToProps
   stateを取得するための関数。connect関数の第一引数に渡す。

2. mapDispatchToProps
   stateを書き換えるための関数。
   connect関数の第二引数に渡す。

mapStateToPropsの例

const mapStateToProps = state => ({
  count: state.value
})

この場合、オブジェクトである{ count: state.value }が、storeにあるstateであり、componentで取得することができます。componentではthis.props.countといった形でpropsからstateの値を参照できます。

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment())
})

dispatch()の引数にactionを渡すことで、reducerからstateの変更を行うことが可能になります。この場合actionは、actionそのものではなく、actionを発行するactionCreatorを渡します。

actionとactionCreator

const increment = () => ({
  type: "INCREMENT"
})

actionは、{type: "INCREMENT"}であり、オブジェクトです。
actionCreatorは、increment（）であり、actionを返す関数です。
mapStateToPropsと同様に、componentではthis.props.increment()といった形でdispatchを行い、typeに応じたstateの変更処理がreducerで行われます。

componentの全体像はこんな感じです。

class App extends Component {
  render() {
    const {
      handleIncrement,
      handleDecrement,
      value
    } = this.props;
    return (
      <div className="Count">
        <div>value: {value}</div>
        <button onClick={handleIncrement}>+1</button>
        <button onClick={handleDecrement}>-1</button>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return { value: state.count.value };　
};
const mapDispatchToProps = (dispatch) => {
  return {
    handleIncrement: () => dispatch(increment()),
    handleDecrement: () => dispatch(decrement())
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

以上、かなり簡単にですが、自分が勉強した事のアウトプットも兼ねて、まとめさせて頂きました。
もし何か解釈が間違っている所などがありましたら、ぜひコメントよろしくお願い致します。

少しでもお役に立てたら幸いです。