Redux Toolkit中AsyncThunkAction类型不匹配错误求助

问题根源 #

你遇到的类型错误主要来自两个核心问题：

• 手动添加thunkMiddleware覆盖了Redux Toolkit默认的中间件配置，破坏了内置的类型推导逻辑
• 虽然导出了AppDispatch，但缺少配套的类型化钩子封装，导致组件中无法正确识别异步Thunk的类型

具体修复步骤 #

1. 修正Store配置

Redux Toolkit的configureStore默认已集成redux-thunk，无需手动导入添加。手动添加会覆盖默认中间件数组，引发类型异常。修改后的Store文件如下：

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import itineraryReducer from "./slices/itinerary";
import destinationReducer from "./slices/destination";
import apisResducer from "./slices/apis";
import mediasReducer from "./slices/media";

const rootReducer = combineReducers({
  itinerary: itineraryReducer,
  destination: destinationReducer,
  medias: mediasReducer,
  apis: apisResducer,
});

const store = configureStore({
  reducer: rootReducer,
  // 移除手动添加的thunkMiddleware，使用RTK默认配置
});

// 导出类型化的Dispatch和RootState
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof rootReducer>;

export default store;

2. 封装类型化的自定义Hook

在项目中创建hooks.ts文件，封装类型化的dispatch和selector钩子，避免重复编写类型声明：

import { useDispatch, useSelector } from "react-redux";
import type { AppDispatch, RootState } from "./store";

// 类型化的useDispatch
export const useAppDispatch = () => useDispatch<AppDispatch>();
// 类型化的useSelector
export const useAppSelector = useSelector.withTypes<RootState>();

3. 在组件中使用类型化Dispatch

替换原有的useDispatch为自定义的useAppDispatch，即可正常调用异步Thunk：

import { useAppDispatch } from "../hooks";
import { fecthAllMedias } from "../thunks";

// 组件内使用
const dispatch = useAppDispatch();

// 调用异步Thunk不再出现类型错误
dispatch(fecthAllMedias({ destination: "xxx", quantity: 5 }));

4. 规范Slice命名（可选）

你的Slice变量名itinerarySlice与name字段"medias"不一致，容易造成混淆，建议统一命名：

import { createSlice } from "@reduxjs/toolkit";
import { fecthAllMedias } from "../thunks";
import { Media } from "@/app/models/media";

const mediasSlice = createSlice({
  name: "medias",
  initialState: [] as Media[] | null,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fecthAllMedias.fulfilled, (_, action) => {
      return action.payload;
    });
  },
});

export const {} = mediasSlice.actions;
export default mediasSlice.reducer;

额外提示 #

注意Thunk函数名拼写错误：fecthAllMedias应为fetchAllMedias，虽不影响功能，但建议修正以保持代码规范。

内容的提问来源于stack exchange，提问作者El Hombre Sin Nombre