Redux Thunk重装后出现类型不兼容错误求助

错误信息 #

Argument of type '{ type: string; }' is not assignable to parameter of type '{ type: string; } & void'

问题背景 #

使用Redux Thunk作为中间件，代码正常运行6个月，重装依赖后出现上述类型错误，请求排查。

相关代码片段 #

dispatch(getSummaryListingAction(GetSummaryListingsSuccess()));
dispatch(getSummaryListingAction(GetSummaryListingsError(e.message)));
dispatch(getSummaryListingAction(GetSummaryListingsError(e.message)));
dispatch(getSummaryListingAction(GetSummaryListingsError(e.message)));

完整Thunk代码 #

import { LossReportAxios } from "../../../services/axios";
import { getSummaryListingAction } from "../../slices/lossReportingSlice";
import { AppDispatch } from "../../store";
import { summaryListingActionTypes } from "../summaryListing/summaryListingActionTypes";

const GetSummaryListingsStart = () => ({
    type: summaryListingActionTypes.GET_SUMMARYLISTING_START
});

const GetSummaryListingsSuccess = () => ({
    type: summaryListingActionTypes.GET_SUMMARYLISTING_SUCCESS,
});

const GetSummaryListingsError = (payload: any) => ({
    type: summaryListingActionTypes.GET_SUMMARYLISTING_ERROR,
    payload: payload
});

export const GetSummaryListings = (token: string,searchObjParams:any,searchBy:string,gridparams:any,navigate:any) => {
    return (dispatch: AppDispatch) => {
        dispatch(getSummaryListingAction(GetSummaryListingsStart()));
        
        if(searchBy === "CLIENT"){
            
            LossReportAxios
            .post(
                "/SummaryListingLossesByDepartmentForClientId",
                searchObjParams,
                {
                  headers: {
                    Authorization: `Bearer ${token}`,
                  },
                }
              ).then(function (res:any) {
                  var totalRows = -1;
                  if (res.data !== null && res.data !== undefined) {
                        if (res.data.length < 10) {
                            totalRows = gridparams.request.startRow + res.data.length;
                        }
                        gridparams.successCallback(res.data, totalRows);
                        dispatch(getSummaryListingAction(GetSummaryListingsSuccess()));
                    } else {
                        gridparams.successCallback([], totalRows);
                    }
                }).catch((e:any) => {
                    dispatch(getSummaryListingAction(GetSummaryListingsError(e.message)));
                });

        } else {
            LossReportAxios
            .post(
                "/SummaryListingLossesByDepartmentForPolicyId",
                searchObjParams,
                {
                  headers: {
                    Authorization: `Bearer ${token}`,
                  },
                }
              ).then(function (res:any) {
                var totalRows = -1;
                if (res.data) {
                    if (res.data.length < 50) {
                        totalRows = gridparams.request.startRow + res.data.length;
                    }
                    gridparams.successCallback(res.data, totalRows);
                    dispatch(getSummaryListingAction(GetSummaryListingsSuccess()));
                } else {
                    gridparams.successCallback([], totalRows);
                }
                }).catch((e:any) => {
                    dispatch(getSummaryListingAction(GetSummaryListingsError(e.message)));
                });
        }

    }
}

Redux Store配置 #

import { configureStore } from '@reduxjs/toolkit'
import { persistedReducer } from './RootReducer';
import logger from "redux-logger";
import thunk from 'redux-thunk';

export const store = configureStore({
  reducer: persistedReducer
})
export const storeWithLogger = configureStore({
  reducer: persistedReducer,
  middleware:(gDM) => gDM({
    serializableCheck:false
  }).concat(logger,thunk)
})
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

排查思路与解决方案 #

这个错误的核心是getSummaryListingAction的类型定义异常，它期望接收的参数是{ type: string; } & void，但传入的手动定义action返回的是普通对象{ type: string; }，类型不匹配。

具体解决步骤： #

1. 检查slice中的action creator定义
   确认lossReportingSlice里的getSummaryListingAction是否被错误定义为返回void的函数，或是类型推导出现偏差。如果是用createSlice生成的action，确保它的参数类型与你手动创建的action结构一致。

2. 替换手动action为Redux Toolkit规范写法
   既然使用了Redux Toolkit，建议直接用createSlice生成action creator，彻底避免手动定义的类型问题：

   // lossReportingSlice.ts
   import { createSlice } from '@reduxjs/toolkit';
   
   const lossReportingSlice = createSlice({
     name: 'lossReporting',
     initialState: { /* 你的初始状态 */ },
     reducers: {
       getSummaryListingStart: (state) => {
         // 状态更新逻辑
       },
       getSummaryListingSuccess: (state) => {
         // 状态更新逻辑
       },
       getSummaryListingError: (state, action: { payload: string }) => {
         // 状态更新逻辑
       }
     }
   });
   
   export const { getSummaryListingStart, getSummaryListingSuccess, getSummaryListingError } = lossReportingSlice.actions;
   

   然后在Thunk中直接dispatch这些action：

   dispatch(getSummaryListingStart());
   dispatch(getSummaryListingSuccess());
   dispatch(getSummaryListingError(e.message));
   

3. 锁定依赖版本
   重装依赖可能升级了@reduxjs/toolkit或typescript，导致类型规则变化。可以恢复到之前能正常运行的版本：

   npm install @reduxjs/toolkit@旧版本号 typescript@旧版本号
   

4. 修正AppDispatch类型
   显式指定Thunk兼容的Dispatch类型，避免类型推导错误：

   import { ThunkDispatch } from '@reduxjs/toolkit';
   import { AnyAction } from 'redux';
   
   export type AppDispatch = ThunkDispatch<RootState, unknown, AnyAction>;
   

内容的提问来源于stack exchange，提问作者Syed saad shah