Redux异步Action报错：类型无法赋值给AnyAction（TS2345）

这个错误的核心是：标准Redux的dispatch方法只能接收普通的Action对象，而你传入的是一个返回异步函数的thunk函数，这种写法需要依赖Redux Thunk中间件才能正常工作，同时类型定义也需要对应调整。

步骤1：确保安装并配置Redux Thunk中间件 #

首先安装Redux Thunk依赖：

npm install redux-thunk
# 或
yarn add redux-thunk

然后在创建Redux Store时，将Thunk加入中间件：

// store/index.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// 配置store并应用Thunk中间件
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

如果你用的是Redux Toolkit的configureStore，它默认已经集成了Thunk，无需手动添加中间件。

步骤2：修正类型定义 #

你的异步Action返回的是Thunk函数，需要使用Redux Thunk提供的ThunkDispatch类型替代标准Dispatch：

// 异步Action文件
import { updateCommentCounterAction } from "../store/commentCounter";
import { PostService } from "../API/PostService";
import { ThunkDispatch } from 'redux-thunk';
import { AnyAction } from 'redux';

// 替换成你的根状态类型，如果还没定义可以先用unknown
type RootState = unknown;

export const fetchComment = (idPost: string | undefined) => {
    return async (dispatch: ThunkDispatch<RootState, void, AnyAction>) => {
        const response = await PostService.getPost(idPost);
        dispatch(updateCommentCounterAction(response.comments));
    };
};

同时在组件中，需要给useDispatch指定正确的类型：

import { useDispatch } from 'react-redux';
import { ThunkDispatch } from 'redux-thunk';
import { AnyAction } from 'redux';
import { fetchComment } from './path/to/your/action';

// 同样替换成你的根状态类型
type RootState = unknown;

const YourComponent = () => {
    // 指定dispatch为ThunkDispatch类型
    const dispatch = useDispatch<ThunkDispatch<RootState, void, AnyAction>>();

    useEffect(() => {
        fetchPost();
        dispatch(fetchComment(idPost));
    }, [dispatch, idPost]);

    // ...组件其他逻辑
};

推荐方案：使用Redux Toolkit简化开发 #

Redux Toolkit（RTK）是官方推荐的Redux开发方式，它内置了Thunk，并且类型推导更友好，无需手动处理复杂的类型定义。你可以用createAsyncThunk重构你的异步Action：

import { createAsyncThunk } from '@reduxjs/toolkit';
import { updateCommentCounterAction } from "../store/commentCounter";
import { PostService } from "../API/PostService";

export const fetchComment = createAsyncThunk(
    'comments/fetchCommentCounter',
    async (idPost: string | undefined, { dispatch }) => {
        const response = await PostService.getPost(idPost);
        dispatch(updateCommentCounterAction(response.comments));
        return response.comments;
    }
);

在组件中使用时，RTK会自动处理dispatch的类型，直接调用即可，无需额外类型声明。

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