ReduxのmapDispatchToProps解説
2024-10-04
ReactJS, Redux, React-ReduxにおけるmapDispatchToPropsの解説
日本語で解説します
mapDispatchToPropsとは何か?
mapDispatchToPropsは、Reduxのストアからアクションディスパッチャーをコンポーネントに接続する際に使用する関数です。これにより、コンポーネントはReduxストア内の状態を変更するためのアクションを直接ディスパッチすることが可能になります。
具体的な役割
- アクションディスパッチャーの取得
Reduxストアからアクションディスパッチャーを取得します。 - アクションの紐付け
mapDispatchToProps関数は、コンポーネント内で呼び出される関数（プロップとして渡されます）と、Reduxストアで定義されているアクションを紐付けます。 - プロップへの渡し
紐付けされた関数をプロップとしてコンポーネントに渡します。これにより、コンポーネント内で関数を呼び出すことで、対応するアクションをディスパッチできます。
使用例
import { connect } from 'react-redux';
// アクションクリエイター関数
function increment() {
return { type: 'INCREMENT' };
}
// コンポーネント
function Counter({ increment }) {
return (
<button onClick={increment}>Increment</button>
);
}
// `mapDispatchToProps`関数
const mapDispatchToProps = {
increment
};
// `connect`関数を使ってコンポーネントをReduxストアに接続
export default connect(null, mapDispatchToProps)(Counter);
この例では、incrementというアクションクリエイター関数をmapDispatchToProps関数に登録しています。これにより、Counterコンポーネントのincrementプロップは、incrementアクションをディスパッチする関数になります。
アクションクリエイターの定義
function increment() {
return { type: 'INCREMENT' };
}
- この関数は、
INCREMENTというタイプのオブジェクトを返します。これは、Reduxストアに状態の変更を通知するためのアクションです。 incrementという関数を作成します。
コンポーネントの作成
function Counter({ increment }) {
return (
<button onClick={increment}>Increment</button>
);
}
incrementプロップがクリックされたときに、ボタンのクリックイベントハンドラーが呼び出されます。- このコンポーネントは、
incrementというプロップを受け取ります。 Counterというコンポーネントを作成します。
mapDispatchToProps関数の定義
const mapDispatchToProps = {
increment
};
incrementキーを定義し、その値としてincrementアクションクリエイター関数を指定します。- このオブジェクトは、コンポーネントのプロップとReduxストアのアクションを結びつけるために使用されます。
mapDispatchToPropsというオブジェクトを作成します。
connect関数によるコンポーネントの接続
export default connect(null, mapDispatchToProps)(Counter);
- 第2引数には、
mapDispatchToProps関数を指定します。 - 第1引数には、状態をコンポーネントにマップする関数（この例では
null）を指定します。 connect関数を使用して、CounterコンポーネントをReduxストアに接続します。
動作の解説
- コンポーネントが再レンダリングされ、更新された状態を反映します。
- Reduxストアは、
INCREMENTアクションを受け取り、状態を更新します。 incrementプロップは、incrementアクションクリエイター関数を呼び出し、INCREMENTアクションをReduxストアにディスパッチします。- ボタンがクリックされると、
incrementプロップが呼び出されます。 incrementプロップは、mapDispatchToProps関数によって定義されたincrementアクションクリエイター関数に紐付けられています。Counterコンポーネントがレンダリングされると、incrementプロップが設定されます。
ファクトリー関数を使う
const mapStateToProps = (state) => ({
count: state.count
});
const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch({ type: 'INCREMENT' })
});
export default connect(mapStateToProps, mapDispatchToProps)( Counter);
- この手法では、
dispatch関数を引数として受け取り、その関数を使ってアクションをディスパッチする関数を返します。 mapDispatch ToPropsをファクトリー関数として定義します。
reactjs redux react-redux
