React Redux Toolkit TypeScript环境下Async Thunk派发报错求助

这个错误是因为useDispatch默认类型仅接受AnyAction，而createAsyncThunk生成的AsyncThunkAction并不兼容该类型。只需给dispatch配置正确的TypeScript类型即可解决。

步骤1：配置Store并导出类型 #

在你的Redux Store配置文件（如store.ts）中，定义AppDispatch和RootState类型：

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    // 其他reducer...
  },
});

// 导出store.dispatch的精准类型
export type AppDispatch = typeof store.dispatch;
// 导出根状态类型（可选，对useSelector后续使用有帮助）
export type RootState = ReturnType<typeof store.getState>;

步骤2：创建自定义useDispatch Hook（推荐） #

为避免每次使用useDispatch都手动指定泛型，创建一个可复用的自定义Hook：
在hooks.ts（或直接写在store.ts中）：

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

export const useAppDispatch = () => useDispatch<AppDispatch>();

步骤3：在组件中替换使用自定义Hook #

修改Login.tsx中的dispatch获取方式：

import React, { useState } from "react"
import { useAppDispatch } from "../redux/hooks"
import { UserLogin } from "../redux/userSlice"

const Login = () => {
  const dispatch = useAppDispatch(); // 替换原useDispatch

  const [email, setEmail] = useState<string>("")
  const [password, setPassword] = useState<string>("")
  
  function LoginRequest(){
    dispatch(UserLogin({email,password})) // 类型错误消失
  }
  
  return (
    // 你的组件内容
  )
}

export default Login

替代方案：直接指定泛型 #

如果不想创建自定义Hook，也可以在组件中直接给useDispatch指定泛型：

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

// ...

const dispatch = useDispatch<AppDispatch>()

额外提示 #

确保你的UserLogin Async Thunk返回正确类型，比如在try块中返回接口数据，方便后续extraReducers处理状态：

export const UserLogin = createAsyncThunk(
  "/users/authentication", 
  async (user:{email:string,password:string}) => {
    try{
      const res = await axios.post("/users/authentication", user)
      return res.data; // 返回用户数据
    } catch(err){
      throw err; // 抛出错误，供rejected状态处理
    }
  }
)

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