无法在dispatch中使用async thunks：类型不匹配问题求助

错误原因 #

你遇到的类型错误本质是dispatch的类型未正确包含Redux Toolkit Async Thunk的类型支持。虽然你定义了NotebooksDispatch，但需确保它是从configureStore生成的store中正确导出的类型——该类型已自动集成了async thunk的处理能力。

正确解决方案 #

1. 修正Store的类型导出 #

更新store.ts，导出包含async thunk支持的dispatch类型，同时推荐导出RootState类型供后续useSelector使用：

import reducer from "./slice";

const store = configureStore({
  reducer,
});

// 导出包含async thunk支持的dispatch类型
export type NotebooksDispatch = typeof store.dispatch;
// 导出RootState类型，用于useSelector的类型推断
export type RootState = ReturnType<typeof store.getState>;

export default store;

2. 使用自定义useDispatch钩子（推荐） #

为避免在每个组件中手动指定dispatch类型，建议创建自定义钩子：

可在store.ts或单独的hooks.ts文件中添加：

import { useDispatch } from 'react-redux';
import type { NotebooksDispatch } from './store';

export const useAppDispatch = () => useDispatch<NotebooksDispatch>();

3. 在组件中使用正确的dispatch #

修改component.tsx，使用自定义钩子或直接指定dispatch类型：

方式一：使用自定义钩子

import { useEffect } from 'react';
import { useAppDispatch } from './store';
import { fetchProjects } from './slice';

export function Example() {
    const dispatch = useAppDispatch();
    
    useEffect(() => {
        dispatch(fetchProjects());
    }, [dispatch]);

    return <div></div>;
}

方式二：直接指定类型

若不想使用自定义钩子，也可直接在组件中导入并指定类型：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import type { NotebooksDispatch } from './store';
import { fetchProjects } from './slice';

export function Example() {
    const dispatch = useDispatch<NotebooksDispatch>();
    
    useEffect(() => {
        dispatch(fetchProjects());
    }, [dispatch]);

    return <div></div>;
}

额外检查点 #

• 确保slice.ts中prototypeItems的类型为ProjectItem[]，保证fetchProjects返回的AsyncThunkAction类型正确。
• 检查所有类型导入路径是否正确，避免因路径错误导致类型推断失效。

内容的提问来源于stack exchange，提问作者Gustavo L.