TS2345：“AsyncThunkAction<void | AddItem, ItemInput, AsyncThunkConfig>”类型的参数不可分配给“AnyAction”类型的参数

Question

在我的切片中，我将操作定义如下： https://github.com/jasonabanico/RedGranite/blob/main/src/Client/RedGranite.Client.Web/src/app/containers/ItemPage/itemPageSlice.ts

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

我还将 useAppDispatch 定义为： https://github.com/jasonabanico/RedGranite/blob/main/src/Client/RedGranite.Client.Web/src/app/hooks.ts

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

我像这样使用上面两个： https://github.com/jasonabanico/RedGranite/blob/main/src/Client/RedGranite.Client.Web/src/app/containers/ItemPage/addItemPage.tsx

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

我收到以下错误：

TS2345：“AsyncThunkAction”类型的参数不可分配给“AnyAction”类型的参数。 21 | 21 详细描述 22 | 22 };

23 | 调度（addItem（itemInput））； | ^^^^^^^^^^^^^^^^^^^ 24 | };

我的定义有什么问题？为什么我不能在调度中使用 addItem ？

Answer 1

根据当前的文档，您的

useAppDispatch

和

useAppSelector

钩子似乎不太正确。

• 对于

  useSelector

  ，您无需每次都输入

  (state: RootState)

• 对于

  useDispatch

  ，默认的

  Dispatch

  类型不知道 thunk。为了正确发送 thunk，您需要使用 商店中特定的定制

  AppDispatch

  类型，包括 thunk 中间件类型，并将其与

  useDispatch

  一起使用。添加一个 预先输入的

  useDispatch

  挂钩可防止您忘记导入

  AppDispatch

  需要的地方。

  import { useDispatch, useSelector } from 'react-redux'
  import type { RootState, AppDispatch } from './store'
  
  // Use throughout your app instead of plain `useDispatch` and `useSelector`
  export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
  export const useAppSelector = useSelector.withTypes<RootState>()
  

将您的

src/Client/RedGranite.Client.Web/src/app/hooks.ts

文件更新为当前建议：

import { useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();