【React】Reduxでクリックしたら複数のdispatchを実行する方法

2023年10月18日2025年1月20日React

ReactでReduxでクリックしたら複数のdispatchを実行する方法を紹介します。

ReactでReduxでクリックしたら複数のdispatchを実行する方法

import { useDispatch, useSelector } from 'react-redux';

// useDispatchを使用してdispatch関数を取得
const dispatch = useDispatch();

useDispatchを使うことで、Reduxのdispatch関数をReactコンポーネントで簡単に利用できます。また、useSelectorを使えば、Reduxストアの状態を取得することができます。

          <button
            type="button"
            onClick={() => dispatch(closeModal())}
          >
            ボタン
          </button>

通常は上のようにかくと一つだけ実行されます。

複数実行する場合は、clickのfunction部分を省略せずに書けばOKです。

          <button
            type="button"
            onClick={() => {
              dispatch(clearCart());
              dispatch(closeModal());
            }}
          >
            ボタン
          </button>

もしくは、関数を変数に入れて、それをonClickに登録すればOKです。

Redux Toolkit（RTK）が使える場合

Redux Toolkit（RTK）は現在、Reduxの標準的な推奨ツールです。Redux Toolkitを使えば、より簡潔にdispatchやstate管理を行えます。

import { clearCart, closeModal } from './features/cartSlice';

<button
  type="button"
  onClick={() => {
    dispatch(clearCart());
    dispatch(closeModal());
  }}
>
  ボタン
</button>;

現在では、Redux Toolkitを使用することでdispatchやactionの管理が簡潔になり、可読性や開発効率が向上します。

非同期処理がある場合

複数のdispatchを実行するケースでは、非同期処理を伴うこともあります。Redux ThunkやRTK Queryなどのミドルウェアを使った非同期処理の例を紹介します。

const handleClick = async () => {
  await dispatch(fetchData());
  dispatch(closeModal());
};

<button type="button" onClick={handleClick}>
  ボタン
</button>;

非同期処理を伴う場合は、Redux Thunkなどのミドルウェアを使うことで、より効率的にdispatchを制御できます。

TypeScript対応

React 19とReduxを使うプロジェクトでは、TypeScriptを利用するケースが増えています。TypeScript対応について簡単に触れます。

import { AppDispatch } from './store';

const handleClick = () => {
  const dispatch: AppDispatch = useDispatch();
  dispatch(clearCart());
  dispatch(closeModal());
};

Redux ToolkitはTypeScript対応が強化されており、型安全なdispatchやstate管理が可能です。