型エラー!Argument of type ‘AsyncThunkAction’ is not assignable to parameter of type ‘AnyAction’.

Next.jsの覚書です。

型エラー!Argument of type ‘AsyncThunkAction’ is not assignable to parameter of type ‘AnyAction’.

createAsyncThunkとDispatchの型ははまらない!

• Redux Toolkit の createAsyncThunk は、非同期処理を扱うための特別なアクションを作成します。
• この非同期アクションは、非同期処理の開始、成功、失敗の各段階で異なるアクションをディスパッチします。
• この非同期アクション自体は特別な型を持っており、デフォルトの dispatch の型とは一致しません。

解決策はconst dispatch: AppDispatch = useDispatch();

Stack Overflowにかいてありました。

Per the Redux and RTK docs, you’ll need to define a more specific AppDispatch type that correctly knows about thunks and declare that dispatch here is that type, like:

https://stackoverflow.com/questions/62238338/how-do-i-resolve-property-type-is-missing-in-type-asyncthunkaction-using-re

dispatch の型を作成する: store.ts で、store.dispatch の型をカスタムの AppDispatch としてエクスポートします。これにより、このカスタム dispatch の型を使用することで、非同期アクションの型の問題を回避できます。

export type AppDispatch = typeof store.dispatch;

dispatch の型をコンポーネントで使用する: 非同期アクションをディスパッチするコンポーネントで、このカスタムの AppDispatch 型を使用して dispatch の型を上書きします。

import { AppDispatch } from '../../redux/store';

(中略)

const dispatch: AppDispatch = useDispatch();

このように、カスタムの dispatch の型を使用することで、非同期アクションの型の問題を解消し、エラーを回避できます。

createAsyncThunk型指定

createAsyncThunk に型指定をするかどうかは、非同期関数の戻り値や、その関数に渡すパラメータの型によって異なります。

createAsyncThunk は、型推論を非常にうまくやってくれるので、多くの場合、型を明示的に指定する必要はありません。しかし、複雑な非同期処理や、型が曖昧な場合には、型を明示的に指定することで、型エラーや不具合を防ぐことができます。

型引数は次のようになっています。

createAsyncThunk<Returned, ThunkArg, ThunkAPIConfig>

• Returned: 非同期関数が成功したときに返すべきデータの型。
• ThunkArg: 非同期関数に渡す引数の型。
• ThunkAPIConfig: これはオプションで、非同期関数のコンテキスト（例：dispatch や getState）の型を設定するためのものです。