mapDispatchToPropsを使いこなして、ReactコンポーネントとReduxストアの通信をマスターしよう

2024-04-02

ReactJS、Redux、React-ReduxにおけるmapDispatchToPropsとは？

mapDispatchToPropsの役割

Action Creatorをコンポーネントに接続する
コンポーネントからActionをディスパッチする
コンポーネントとReduxストア間の通信を管理する

mapDispatchToPropsは、connect関数と共に使用されます。connect関数は、コンポーネントをReduxストアに接続するための高階関数です。mapDispatchToPropsは、connect関数の第二引数として渡されます。

import React, { Component } from 'react';
import { connect } from 'react-redux';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onButtonClick}>ボタン</button>
      </div>
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    onButtonClick: () => {
      dispatch({
        type: 'INCREMENT_COUNT'
      });
    }
  };
};

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

上記の例では、mapDispatchToPropsは、onButtonClickという名前のAction Creatorをコンポーネントのプロパティとしてラップしています。onButtonClick関数は、INCREMENT_COUNTというActionをディスパッチします。

mapDispatchToPropsは、2つの引数を受け取ります。

dispatch: ReduxストアにActionをディスパッチするための関数
ownProps: コンポーネント自身のプロパティ

mapDispatchToPropsは、オブジェクトを返す必要があります。オブジェクトのキーはコンポーネントのプロパティ名になり、値はAction Creatorになります。

mapDispatchToPropsは、オブジェクトだけでなく、関数としても使用できます。関数は、dispatchとownPropsを引数として受け取ります。

const mapDispatchToProps = (dispatch, ownProps) => {
  return (dispatch) => {
    return {
      onButtonClick: () => {
        dispatch({
          type: 'INCREMENT_COUNT',
          payload: ownProps.count
        });
      }
    };
  };
};

上記の例では、mapDispatchToPropsは、ownPropsを受け取り、Action Creatorに渡しています。

mapDispatchToPropsは、Reactコンポーネント内でReduxのAction Creatorを呼び出すための重要な関数です。mapDispatchToPropsを理解することで、コンポーネントとReduxストア間の通信を効果的に管理することができます。

import React, { Component } from 'react';
import { connect } from 'react-redux';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onButtonClick}>ボタン</button>
      </div>
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    onButtonClick: () => {
      dispatch({
        type: 'INCREMENT_COUNT'
      });
    }
  };
};

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

上記のコードでは、MyComponentというコンポーネントが定義されています。MyComponentには、onButtonClickという名前のボタンがあります。onButtonClickボタンがクリックされると、mapDispatchToPropsによって定義されたonButtonClick関数が呼び出されます。onButtonClick関数は、INCREMENT_COUNTというActionをディスパッチします。

INCREMENT_COUNT Actionは、Reduxストアのcountプロパティを1増やします。

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNT':
      return {
        ...state,
        count: state.count + 1
      };
    default:
      return state;
  }
};

上記のコードは、countプロパティを持つReduxストアのreducerを定義しています。INCREMENT_COUNT Actionがディスパッチされると、countプロパティが1増えます。

mapDispatchToPropsの代替方法

const mapDispatchToProps = (dispatch, ownProps) => {
  return (dispatch) => {
    return {
      onButtonClick: () => {
        dispatch({
          type: 'INCREMENT_COUNT',
          payload: ownProps.count
        });
      }
    };
  };
};

その他の代替方法

useDispatch Hook: React 16.8以降では、useDispatch Hookを使用して、コンポーネント内でdispatch関数にアクセスすることができます。

const MyComponent = () => {
  const dispatch = useDispatch();

  const onButtonClick = () => {
    dispatch({
      type: 'INCREMENT_COUNT'
    });
  };

  return (
    <div>
      <button onClick={onButtonClick}>ボタン</button>
    </div>
  );
};

Redux Toolkit: Redux Toolkitを使用すると、createAction関数を使用してAction Creatorを作成することができます。

const { createAction } = require('@reduxjs/toolkit');

const incrementCount = createAction('INCREMENT_COUNT');

const MyComponent = () => {
  const dispatch = useDispatch();

  const onButtonClick = () => {
    dispatch(incrementCount());
  };

  return (
    <div>
      <button onClick={onButtonClick}>ボタン</button>
    </div>
  );
};

mapDispatchToPropsは、コンポーネントからReduxストアにActionをディスパッチするための便利な関数です。しかし、オブジェクトだけでなく、関数やuseDispatch Hook、Redux Toolkitなどの代替方法も存在します。状況に応じて、最適な方法を選択する必要があります。

reactjs redux react-redux