在试图在组件中派遣thunk动作时，用打字稿中的react redux遇到某种错误

Question

嗨，大家好，这是我尝试使用Redux-Toolkit的React-Typecript并遇到错误的第一个项目：

类型'appthunk'的参数不能分配给类型“ AnyAction”的参数。类型为“ appthunk”中缺少属性“类型”，但类型为“ AnyAction”中需要。

基本上，我只想从CATS Public 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/fromate/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;

因此您可以看到我在useffect Hook中呼叫getCats（）函数，但是它被带有错误。

任何帮助都将被应用！提前致谢！

Answer 1

在“ store.tsx”中underispatch（）中不采用任何

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

参数，但是您在'gameview.tsx'中通过了一个：

 dispatch(getCats());

因此，您可以通过在'store.tsx'中添加一个可选的参数来解决此问题，因此它将是：

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