Redux Toolkit中AsyncThunkAction无法传入dispatch的TS2345错误排查

代码定义情况 #

1. Slice中的异步Action #

export const addItem = createAsyncThunk(
    'itemPage/addItem',
    async (itemInput: ItemInput) => {
        return await itemService
            .addItem(itemInput)
            .catch((err: any) => {
                console.log("Error:", err);
            });
    },
)

2. hooks.ts中的useAppDispatch定义 #

初始写法：

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

后续修改为：

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();

3. 组件中的使用代码 #

const dispatch = useAppDispatch();
...
dispatch(addItem(itemInput));

触发的错误信息 #

TS2345: Argument of type 'AsyncThunkAction<void | AddItem, ItemInput, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction'.
23 | dispatch(addItem(itemInput));
| ^^^^^^^^^^^^^^^^^^

错误复现步骤 #

• 打开终端
• 执行命令：cd src && cd Client && cd RedGranite.Client.Web
• 运行npm install安装依赖
• 执行npm run build即可触发该类型错误

疑问 #

我的定义哪里存在问题？为什么无法在dispatch中直接使用addItem这个异步Action？

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