React-Redux中mapDispatchToProps的TS类型错误：Dispatch不兼容AnyAction

你的错误根源在于：Redux默认的Dispatch类型仅支持接收普通Action对象，但CreateCourse是一个返回异步函数的thunk，两者类型不匹配，导致TypeScript报错。下面是规范的TypeScript解决方案：

步骤1：定义支持Thunk的Dispatch类型 #

首先在你的Redux Store配置文件中，明确RootState（全局状态结构）和AppDispatch（支持thunk的Dispatch类型）：

如果你用Redux Toolkit（推荐） #

import { configureStore } from '@reduxjs/toolkit';
import courseReducer from './courseReducer';

export const store = configureStore({
  reducer: {
    courseReducer,
  },
});

// 全局状态类型
export type RootState = ReturnType<typeof store.getState>;
// 支持thunk的Dispatch类型
export type AppDispatch = typeof store.dispatch;

如果你用传统Redux + thunk中间件 #

import { createStore, applyMiddleware, combineReducers, AnyAction } from 'redux';
import thunk, { ThunkDispatch } from 'redux-thunk';
import courseReducer from './courseReducer';

const rootReducer = combineReducers({
  courseReducer,
});

export type RootState = ReturnType<typeof rootReducer>;
// 定义支持thunk的Dispatch类型
export type AppDispatch = ThunkDispatch<RootState, unknown, AnyAction>;

const store = createStore(rootReducer, applyMiddleware(thunk));

步骤2：修改CreateCoursePage的类型定义 #

将默认的Dispatch替换为上面定义的AppDispatch，同时优化Props和mapStateToProps的类型：

import { AppDispatch, RootState } from './store'; // 导入自定义的类型
import { CreateCourse } from './DataOperations';

interface CreateCourseProps {
    error: string;
    createCourse: (course: Course) => void; // 调用createCourse无需返回值，简化类型
}

const CreateCoursePage: React.FC<CreateCourseProps> = ({ createCourse }) => {
    
    const onSubmit = (course: Course) => {
        createCourse(course);
    };

    return (
        // 你的组件代码
    );
};

// 用RootState代替any，类型更安全
const mapStateToProps = (state: RootState) => ({
    error: state.courseReducer.error
})

// 使用AppDispatch替代默认Dispatch，支持thunk函数
const mapDispatchToProps = (dispatch: AppDispatch) => ({
    createCourse: (course: Course) => dispatch(CreateCourse(course)), 
});

// 显式指定connect的类型参数（可选，但更严谨）
const ConnectedCreateCourse = connect<
  ReturnType<typeof mapStateToProps>,
  typeof mapDispatchToProps,
  CreateCourseProps,
  RootState
>(mapStateToProps, mapDispatchToProps)(CreateCoursePage);

export default ConnectedCreateCourse;

简化写法（可选） #

你可以直接传递对象给mapDispatchToProps，让Redux自动绑定dispatch，无需手动处理：

// 替换原来的mapDispatchToProps
const mapDispatchToProps = {
  createCourse: CreateCourse,
};

// 后续connect用法不变
const ConnectedCreateCourse = connect(mapStateToProps, mapDispatchToProps)(CreateCoursePage);

这种写法下，TypeScript会自动识别thunk函数的类型，无需额外配置。

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