使用Redux Toolkit与React分发异步Action时出现类型不匹配错误的问题求助

这个错误是TypeScript类型不匹配导致的——默认的useDispatch钩子只识别AnyAction类型，但你通过createAsyncThunk创建的newRegister返回的是AsyncThunkAction，两者类型不兼容。不过别担心，你的Store代码已经准备好了修复的基础，只需要调整组件里的dispatch使用方式：

步骤1：使用自定义的useAppDispatch而非默认useDispatch #

你的Store文件里已经定义了useAppDispatch，它已经包含了Redux Toolkit异步thunk的类型支持。现在需要在注册组件里导入并使用它，而不是直接用React Redux的默认useDispatch：

// 替换成你store文件的实际路径
import { useAppDispatch } from '../store'; 

const RegisterComponent = () => {
  // 使用自定义的useAppDispatch
  const dispatch = useAppDispatch(); 

  const formik = useFormik({ 
    initialValues: { 
      username: '', 
      email: '', 
      password: '', 
    }, 
    validationSchema: validationSchema, 
    onSubmit: () => { 
      const user: User = { 
        username: formik.values.username, 
        email: formik.values.email, 
        password: formik.values.password, 
      } 
      // 现在dispatch会正确识别AsyncThunkAction类型
      dispatch(newRegister(user)) 
    }, 
  })

  // ... 组件其他代码
}

步骤2：确认Store类型定义正确（可选检查） #

你的Store里的AppDispatch定义是正确的：

export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;

Redux Toolkit的configureStore会自动为dispatch添加异步thunk的类型支持，所以这个类型定义能让useAppDispatch拥有正确的类型。

额外优化：明确AsyncThunk的泛型类型（可选） #

为了让类型更清晰，你可以给createAsyncThunk指定泛型参数，明确返回值和参数的类型：

// 先定义响应数据的类型
interface RegisterResponse {
  username: string;
  // 其他返回字段，比如token、id等
}

export const newRegister = createAsyncThunk<RegisterResponse, User>(
  'users/register', // 建议给action type加前缀，避免和其他slice冲突
  async (user: User) => { 
    const response = await AuthService.register( 
      user.username, 
      user.email, 
      user.password 
    ) 
    return response.data 
  }
)

这样TypeScript能更精准地推断action.payload的类型，在extraReducers里使用时也会有更好的类型提示。

这样调整后，类型错误就应该消失了——核心就是让dispatch使用包含异步thunk支持的自定义类型，而不是默认的AnyAction限制。

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