使用Redux Toolkit的createAsyncThunk时类型错误如何解决？

错误原因 #

这个TypeScript类型错误是因为默认dispatch函数的类型仅接受AnyAction，但createAsyncThunk生成的异步action属于AsyncThunkAction类型，两者类型不兼容导致的。

解决步骤 #

1. 配置Store并导出正确类型 #

在你的Redux Store配置文件（比如store.ts）中，导出适配整个store的类型，让TypeScript识别完整的状态和dispatch结构：

import { configureStore } from '@reduxjs/toolkit';
import { loginReducer } from './loginSlice';

export const store = configureStore({
  reducer: {
    login: loginReducer,
    // 其他reducer按需添加
  },
});

// 导出整个store的状态类型
export type RootState = ReturnType<typeof store.getState>;
// 导出包含异步action的dispatch类型
export type AppDispatch = typeof store.dispatch;

2. 创建类型安全的useDispatch Hook #

在单独的工具文件（比如hooks.ts）或者Store配置文件中，定义自定义的useDispatch：

import { useDispatch } from 'react-redux';
import type { AppDispatch } from './store';

// 自定义Hook，自动绑定正确的dispatch类型
export const useAppDispatch = () => useDispatch<AppDispatch>();

3. 在组件中替换默认useDispatch #

修改Login.tsx中的代码，使用自定义的useAppDispatch替代默认Hook：

// 导入自定义Hook，而非react-redux的默认useDispatch
import { useAppDispatch } from './hooks';
import { loginUser } from './loginSlice';

// ...其他代码
const onSubmit: SubmitHandler<ILoginData> = (data) => {
  const dispatch = useAppDispatch();
  dispatch(loginUser(data));
};
// ...其他代码

额外说明 #

完成上述配置后，TypeScript就能正确识别异步action的类型，不会再抛出类型不匹配的错误，同时整个Redux应用都会获得完整的类型提示，提升开发体验。

内容的提问来源于stack exchange，提问作者Johan