使用自定义类型的 useAppDispatch 挂钩时获取 "Argument of type 'AsyncThunkAction<*> is not assignable to parameter of type 'Action<any>"

Question

this link 中的工作示例。

我开始使用 TypeScript 和 Redux Toolkit 开发 React 应用程序。我遵循了 Redux Toolkit 文档中有关如何将其与 TypeScript 一起使用的说明。因此，我输入了 State（RootState 类型）和 Dispatch（AppDispatch 类型）

的版本

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

此外，我正在尝试使用 appDispatch (useAppDispatch) 的打字版本。

export const useAppDispatch = (): ReturnType<typeof useDispatch> =>
  useDispatch<AppDispatch>();

问题是我收到一条错误消息

Argument of type 'AsyncThunkAction<string, void, ThunkAPi>' is not assignable to parameter of type 'Action'

使用 useAppDispatch 的 return 调用异步 thunk 时：

export const Information: React.FunctionComponent = () => {
  const appDispatch = useAppDispatch();
  useEffect(() => {
    appDispatch(fetchInformation()); // error occurs here
  });

  return <p>An awesome information component</p>;
};

我的 thunk 是使用 createAsyncThunk:

创建的

type ThunkAPi = {
    rejectValue: string;
};

export const fetchInformation = createAsyncThunk<string, void, ThunkAPi>(
    "information/fetchInformation",
    async (_, thunkAPi) => {
        const result = Math.floor(Math.random() * 10);
        if (result > 3) {
            return Promise.resolve("resolved");
        }

        return thunkAPi.rejectWithValue("rejected");
    }
);

我不知道为什么，但是当我删除 useAppDispatch 的类型时错误消失了。也就是这样使用：

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

而不是：

export const useAppDispatch = (): ReturnType<typeof useDispatch> =>
      useDispatch<AppDispatch>();

此外，当我使用标准钩子 useDispatch 而不是自定义类型 useAppDispatch 时错误消失了。

所以，我的问题是：为什么会出现这个错误？似乎我所有的类型系统都是正确的...我寻找了类似的问题，但没有找到解决我问题的方法。

感谢您的帮助。

Answer 1

如 https://redux.js.org/recipes/usage-with-typescript#define-typed-hooks 中的具体记录，正确的定义是：

import { TypedUseSelectorHook, 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<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

您的示例表明它 return 是“useDispatch 的 return 类型”，即普通 un-augmented/non-thunk-aware Dispatch 类型。那肯定不行。

不确定您为什么要尝试为 useAppDispatch 做一些不同的事情 - 请使用此处显示的正确定义。

使用自定义类型的 useAppDispatch 挂钩时获取 "Argument of type 'AsyncThunkAction<*> is not assignable to parameter of type 'Action<any>"

Getting "Argument of type 'AsyncThunkAction<*> is not assignable to parameter of type 'Action<any>" when using custom typed useAppDispatch hook

typescript

reactjs

redux

redux-toolkit