Redux TypeScript中dispatch异步Action报错：类型不兼容问题求助

问题场景 #

在TypeScript环境下开发Redux应用，实现自动登录功能时，无论是使用自定义异步Thunk还是createAsyncThunk创建的异步操作，dispatch时都会出现类型报错：

• 自定义Thunk报错：Argument of type '(dispatch: AppDispatch) => Promise<void>' is not assignable to parameter of type 'AnyAction'
• createAsyncThunk报错：Argument of type 'AsyncThunkAction<void, void, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction'

相关代码片段 #

初始错误调用代码

import { useDispatch } from 'react-redux';

const autoLoginAndInitialize = async () => {
  const dispatch = useDispatch();
  dispatch(tryAutoLogin());
  updateDeviceId();
};

自定义Thunk实现

export const tryAutoLogin = () => async (dispatch: AppDispatch) => {
  try {
    const userData = await AsyncStorage.getItem("userData");
    if (userData) {
      const parsedUserData = JSON.parse(userData);
      dispatch(auth.actions.setCredentials({ ...parsedUserData }));
    }
  } catch (err) {
    console.error("Error while trying to auto-login:", err);
  }
};

createAsyncThunk实现

export const tryAutoLogin = createAsyncThunk(
  "auth/tryAutoLogin",
  async (_, { dispatch }) => {
    try {
      const userData = await AsyncStorage.getItem("userData");
      if (userData) {
        const parsedUserData = JSON.parse(userData);
        dispatch(auth.actions.setCredentials({ ...parsedUserData }));
      }
    } catch (err) {
      console.error("Error while trying to auto-login:", err);
      throw err;
    }
  }
);

已配置的Store与自定义Hooks

// store.ts
const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk],
  devTools: true,
});

export type AppDispatch = typeof store.dispatch;
export default store;

// custom hooks
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { RootState } from "../redux/rootReducer";
import { AppDispatch } from "../redux/store";

type DispatchFunc = () => AppDispatch;
export const useAppDispatch: DispatchFunc = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

核心原因 #

默认的useDispatch钩子返回的是Dispatch<AnyAction>类型，仅支持dispatch标准的Action对象。而你已经配置了Thunk中间件，需要使用自定义的useAppDispatch来获取支持Thunk/AsyncThunk的AppDispatch类型。

解决方案 #

1. 替换为自定义的useAppDispatch #

在组件中导入并使用你定义好的useAppDispatch，而非默认的useDispatch：

// 导入自定义hook，替换默认useDispatch
import { useAppDispatch } from './path/to/your/custom/hooks';

const autoLoginAndInitialize = async () => {
  const dispatch = useAppDispatch(); // 获取带类型的dispatch
  dispatch(tryAutoLogin()); // 类型匹配，不再报错
  updateDeviceId();
};

2. 优化Store中间件配置（可选） #

原配置中middleware: [thunk]会覆盖Redux Toolkit的默认中间件数组，建议改为使用getDefaultMiddleware来保留默认中间件并添加Thunk，避免潜在的功能缺失：

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

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
  devTools: true,
});

3. 规范createAsyncThunk的使用（推荐） #

使用createAsyncThunk时，不建议在内部手动dispatch其他Action，而是通过slice的extraReducers监听AsyncThunk的状态来更新Store，这样更符合Redux Toolkit的设计规范：

// auth slice
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 调整AsyncThunk，直接返回数据
export const tryAutoLogin = createAsyncThunk(
  "auth/tryAutoLogin",
  async () => {
    const userData = await AsyncStorage.getItem("userData");
    return userData ? JSON.parse(userData) : null;
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState: { credentials: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(tryAutoLogin.fulfilled, (state, action) => {
        if (action.payload) {
          state.credentials = action.payload; // 直接更新状态
        }
      })
      .addCase(tryAutoLogin.rejected, () => {
        console.error('自动登录失败');
      });
  }
});

export default authSlice.reducer;

此时dispatchtryAutoLogin()即可，类型会自动匹配AppDispatch。

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