Redux Toolkit - “AsyncThunkAction<>”类型的参数不可分配给“AnyAction”类型的参数

Question

我正在将我的 React / Redux 应用程序移动到 Redux 工具包，并按照此处给出的说明进行操作。

我的自定义选择器和调度，根据文档。

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/index";

export const useMyDispatch = () => useDispatch<AppDispatch>();
export const useMySelector: TypedUseSelectorHook<RootState> = useSelector;

useMyDispatch 的类型是useMyDispatch(): Dispatch<AnyAction>

类型GETALLPAGESACTION是

export type GETALLPAGESACTION = {
  pagesLoading?: boolean;
  pages?: PageType[] | null;
  error?: Error | null;
}

这是我非常基本的行动：

export const getAllPages = createAsyncThunk<GETALLPAGESACTION, 
 string,
 { dispatch: AppDispatch; state: RootState; }>("pages/getAllPages", 
   async () => {
   const pagesRes = await axios.get("___");
   if (pagesRes) {
     const finalPages: PageType[] = [];
     pagesRes.data.forEach((page: PageType) => {
     finalPages.push(page);
   });
   return { pages: finalPages, pagesLoading: false };
 }
 return { pages: [], pagesLoading: false };
});

我的商店很简单：

const appStore = configureStore({
  reducer: {
    pages: PagesReducer, // pagesSlice.reducer is default export
  },
});
export type RootState = ReturnType<typeof appStore.getState>;
export type AppDispatch = typeof appStore.dispatch;

但是当我尝试getAllPages在我的组件中使用时，出现上述错误。

useEffect(() => {
  dispatch(getAllPages());  // Error here 
 }, []);

Argument of type 'AsyncThunkAction<GETALLPAGESACTION, string, { dispatch: Dispatch<AnyAction>; state: { pages: { pages: null; pagesLoading: boolean; }; }; }>' is not assignable to parameter of type 'AnyAction'.

我知道这个问题已经被问过好几次了，我已经尝试添加这些解决方案，包括尝试设置一个显式的中间件类型，它控制调度类型，但这些都不起作用。据我所知（我对 Typescript 比较陌生），这里没有正确推断调度类型？

这是我的切片

export const pagesSlice = createSlice({
  name: "pages",
  initialState,
  reducers: {},
  extraReducers: {
    [getAllPages.pending]: (state, action: PayloadAction<GETALLPAGESACTION>) =>   {
      state.pagesLoading = true;
    },
    [getAllPages.fulfilled]: (state, action: PayloadAction<GETALLPAGESACTION>) => {
      state.pages = action.payload.pages;
      state.pagesLoading = false;
    },
   [getAllPages.rejected]: (state, action: PayloadAction<GETALLPAGESACTION>) => {
      state.pagesLoading = false;
   },
 },
});
export default pagesSlice.reducer;

我真的可以在这里使用一些帮助，特别是解释这里出了什么问题以及我应该进一步深入研究以更好地理解这一点。谢谢！

Answer 1

就我而言，我必须创建函数并在react-redux 的组件中useAppDispatch使用它。useDispatch

export type AppDispatch = typeof store.dispatch

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

Answer 2

大多数时候，这只是一个错误，由 Redux 4.0.5 和 Redux 4.1.0/4.1.1 同时安装在您的node_modules.

大多数时候，可以通过重新安装react-redux、@types/react-redux和来解决此问题@reduxjs/toolkit。

如果您使用的是yarn，您也可以运行它yarn why redux，它会列出所有已安装的版本以及安装它们的原因。

2022 年 6 月更新：

react-redux如果您安装了 v.8 并且仍然@types/react-redux安装了 v.7，也会发生同样的情况。react-redux8 附带了它自己的类型定义 - 在这种情况下请卸载@types/react-redux.