Redux ToolkitとTypeScript：dispatchメソッドとAsyncThunkActionの型問題を解決しよう！

Redux ToolkitをTypeScriptと一緒に使用する際、dispatchメソッドとAsyncThunkActionの型の不一致に遭遇することがあります。この記事では、この問題の原因と解決策について、具体的なコード例を交えて解説します。

問題の概要と結論

dispatchメソッドは、デフォルトでAnyAction型のアクションしか受け付けません。一方で、createAsyncThunkによって作成される非同期アクションはAsyncThunkAction型となります。その結果、次のようなコードは型エラーが発生します。

問題

//型 'AsyncThunkAction<User, { email: string | undefined; password: string | undefined; }, { rejectValue: any; state?: unknown; dispatch?: Dispatch<AnyAction> | undefined; extra?: unknown; serializedErrorType?: unknown; pendingMeta?: unknown; fulfilledMeta?: unknown; rejectedMeta?: unknown; }>' の引数を型 'AnyAction' のパラメーターに割り当てることはできません。
dispatch(login({ email: emailValue, password: passwordValue }));

解決

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  // リデューサーの設定など
});

//storeからdispatchの型を抽出し定義
export type AppDispatch = typeof store.dispatch;

import { useDispatch } from 'react-redux';
import { AppDispatch } from './store'; // 定義したカスタムディスパッチ型をインポート
import { login } from './userSlice';


const dispatch: AppDispatch = useDispatch(); // カスタムディスパッチ型を指定

dispatch(login({ email: emailValue, password: passwordValue }));

この問題を解決するためには、カスタムのdispatch型を定義し、AsyncThunkAction型のアクションも受け付けるようにする必要があります。

カスタムディスパッチ型の定義

Redux ToolkitのconfigureStore関数を用いてストアを作成した場合、そのストアのdispatchメソッドはカスタマイズされたものになります。このカスタムdispatch型を利用することで、上記の型不一致の問題を解決できます。

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  // リデューサーの設定など
});

export type AppDispatch = typeof store.dispatch;

このAppDispatch型は、AsyncThunkAction型のアクションも受け付けることができます。

カスタムディスパッチ型の定義

定義したカスタムディスパッチ型AppDispatchをuseDispatchフックとともに利用します。これにより、非同期アクションをdispatchする際の型エラーを解消できます。

import { useDispatch } from 'react-redux';
import { AppDispatch } from './store'; // 定義したカスタムディスパッチ型をインポート
import { login } from './userSlice';


const dispatch: AppDispatch = useDispatch(); // カスタムディスパッチ型を指定

dispatch(login({ email: emailValue, password: passwordValue }));

まとめ

Redux ToolkitとTypeScriptを組み合わせて使用する際には、非同期アクションをdispatchするためにカスタムディスパッチ型の定義と利用が必要です。カスタムディスパッチ型を正しく設定することで、型安全性を損なうことなく、非同期アクションの利用が可能になります。これにより、開発の効率性とコードの品質が向上します。