调用Redux Action时触发TypeScript类型错误，如何修复？

问题详情 #

我编写了一个用于显示提示框的Redux Action，代码如下：

export const showAlertConfirm = (msg) => (dispatch) => {
    dispatch({
        type: SHOW_ALERT_CONFIRM,
        payload: {
            title: msg.title,
            body: msg.body,
            response: msg.response,
            dataBag: msg.dataBag
        }
    });
};

在组件中调用该Action的代码：

dispatch(showAlertConfirm({
            title: "my title",
            body: "my desc",
            dataBag: {
                prop: val
            }
        }));

功能运行正常，但Lint构建时触发如下类型错误：

Type error: Argument of type '(dispatch: any) => void' is not assignable to parameter of type 'AnyAction'.

修复方案 #

这个错误的核心原因是：你使用了Redux Thunk（返回函数的Action），但TypeScript默认的dispatch类型仅支持标准Action对象，无法识别返回函数的Thunk Action。以下是几种有效的修复方式：

1. 为组件中的dispatch指定Thunk兼容类型 #

直接在组件中导入ThunkDispatch，显式声明dispatch的类型：

import { useDispatch } from 'react-redux';
import { ThunkDispatch } from 'redux-thunk';
import { RootState, AnyAction } from '../path-to-your-store'; // 替换为你项目中RootState和Action的实际路径

// 声明dispatch类型
const dispatch = useDispatch<ThunkDispatch<RootState, undefined, AnyAction>>();

2. 为Thunk Action定义完整类型约束 #

为Action的参数、返回值都加上类型定义，让TypeScript能正确识别这是一个Thunk Action：

import { ThunkAction } from 'redux-thunk';
import { RootState, AnyAction } from '../path-to-your-store';

// 定义Alert Confirm的payload类型
interface AlertConfirmPayload {
  title?: string;
  body?: string;
  response?: () => void;
  dataBag?: Record<string, unknown>;
}

// 定义Action常量和类型
export const SHOW_ALERT_CONFIRM = 'SHOW_ALERT_CONFIRM';
interface ShowAlertConfirmAction {
  type: typeof SHOW_ALERT_CONFIRM;
  payload: AlertConfirmPayload;
}

// 为Thunk Action指定类型
export const showAlertConfirm = (msg: AlertConfirmPayload): ThunkAction<void, RootState, undefined, ShowAlertConfirmAction> => (dispatch) => {
  dispatch({
    type: SHOW_ALERT_CONFIRM,
    payload: {
      title: msg.title,
      body: msg.body,
      response: msg.response,
      dataBag: msg.dataBag
    }
  });
};

3. 全局配置Store的Dispatch类型（推荐） #

在Store创建文件中，导出兼容Thunk的Dispatch类型，后续组件直接复用即可：

import { createStore, applyMiddleware } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';
import rootReducer, { RootState } from '../path-to-your-reducers';
import { AnyAction } from 'redux';

// 创建Store时指定Thunk中间件类型
const store = createStore(
  rootReducer,
  applyMiddleware(thunk as ThunkMiddleware<RootState, AnyAction>)
);

// 导出全局的Dispatch类型
export type AppDispatch = typeof store.dispatch;

之后在组件中使用：

import { useDispatch } from 'react-redux';
import { AppDispatch } from '../path-to-your-store';

const dispatch = useDispatch<AppDispatch>();

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