尝试在组件中分派 thunk 操作时，在使用 typescript 反应 redux 时出现某种错误答案

【问题标题】：Getting some kind of error in react redux with typescript while trying to dispatch a thunk action in a component尝试在组件中分派 thunk 操作时，在使用 typescript 反应 redux 时出现某种错误
【发布时间】：2022-07-02 23:37:26
【问题描述】：

大家好，这是我的第一个项目，我尝试将 react-typescript 与 redux-toolkit 一起使用，但出现错误：

“AppThunk”类型的参数不能分配给“AnyAction”类型的参数。 “AppThunk”类型中缺少属性“type”，但在“AnyAction”类型中是必需的。

基本上我只是想从猫公共 API 获取数据，但它似乎不起作用，我真的很想得到一些帮助。

src/app/rootReducer.tsx

import { combineReducers } from "@reduxjs/toolkit";
import catsReducer from "../features/cat/catsSlice";

const rootReducer = combineReducers({
  cats: catsReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

export default rootReducer;

src/app/store.tsx

import { configureStore, Action } from "@reduxjs/toolkit";
import { useDispatch } from "react-redux";
import { ThunkAction } from "redux-thunk";

import rootReducer, { RootState } from "./rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch();
export type AppThunk = ThunkAction<void, RootState, unknown, Action>;

export default store;

src/features/cat/catsSlice.tsx

import axios from "axios";
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

import { AppThunk } from "../../app/store";
import { RootState } from "../../app/rootReducer";

export interface CatsState {
  cats: Array<Cat>;
  isLoading: boolean;
  error: CatsError;
}

export interface Cat {
  id: string;
  categories?: Array<any>;
  breeds: Array<any>;
  url: string;
  width: number;
  height: number;
}

export interface CatsError {
  message: string;
}

export const initialState: CatsState = {
  cats: [],
  isLoading: false,
  error: { message: "" },
};

export const catsSlice = createSlice({
  name: "cat",
  initialState,
  reducers: {
    setLoading: (state, { payload }: PayloadAction<boolean>) => {
      state.isLoading = payload;
    },
    setCatsSuccess: (state, { payload }: PayloadAction<Array<Cat>>) => {
      state.cats = payload;
    },
    setCatsFailed: (state, { payload }: PayloadAction<CatsError>) => {
      state.error = payload;
    },
  },
});

export const { setCatsSuccess, setCatsFailed, setLoading } = catsSlice.actions;

export const getCats = (): AppThunk => async (dispatch) => {
  try {
    dispatch(setLoading(true));
    const catsResponse = await axios.get(
      "https://api.thecatapi.com/v1/images/search?limit=8&size=small&order=random"
    );
    dispatch(setCatsSuccess(catsResponse.data));
  } catch (error) {
    dispatch(setCatsFailed({ message: "An Error occurred" }));
  } finally {
    dispatch(setLoading(false));
  }
};

export const catsSelector = (state: RootState) => state.cats;
export default catsSlice.reducer;

src/components/game/GameView.tsx

import React, { useEffect } from "react";
import { getCats, catsSelector, Cat } from "../../features/cat/catsSlice";
import { useSelector, useDispatch } from "react-redux";

const GameView: React.FC = (): JSX.Element => {
  const dispatch = useDispatch();
  const { cats, isLoading, error } = useSelector(catsSelector);

  useEffect(() => {
    dispatch(getCats());
  }, [dispatch]);

  return <>GameView</>;
};

export default GameView;

如您所见，我在 useEffect 钩子中调用了 getCats() 函数，但它带有错误下划线。

如有任何帮助，我们将不胜感激！提前致谢！

【问题讨论】：

标签： reactjs typescript redux-thunk redux-toolkit thunk

【解决方案1】：

在 'store.tsx' 中 useDispatch() 不需要任何内容

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

参数，但您在“GameView.tsx”中传递了一个：

 dispatch(getCats());

因此，您可以通过在“store.tsx”中向 useDispatch 添加可选参数来解决此问题，因此改为：

export const useAppDispatch: (arg?:any) => AppDispatch = useDispatch

【讨论】：