Argument of type 'AsyncThunkAction<any, void, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction'

56 Views Asked by At

iam using react-Redux-Toolkit + createAsyncThunk . I'm asking this question because an error occurred during development.

categorySlice.js:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import useGetData from "hooks/useGetDate";

const initialState = {
  category: [],
  loading: false,
  error: null,
};

export const getAllCategory = createAsyncThunk(
  "category/getAll",
  async (url, thunkAPI) => {
    const { rejectWithValue } = thunkAPI;
    try {
      const res = await useGetData(url);
      return res.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);

export const categorySlice = createSlice({
  name: "category",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getAllCategory.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(getAllCategory.fulfilled, (state, action) => {
        state.loading = false;
        state.error = null;
        state.category = action.payload; // Assuming action.payload is an array of categories
      })
      .addCase(getAllCategory.rejected, (state, action) => {
        state.loading = false;
        state.error = action?.error?.message;
      });
  },
});

export default categorySlice.reducer;

AllCategoryPage.js(my component):

import { useEffect } from "react";
import CategoryContainer from "../../Components/Category/CategoryContainer";
import Pagination from "../../Components/Uitily/Pagination";
import { useSelector, useDispatch } from "react-redux";
import { getAllCategory } from "redux/categorySlice";

const AllCategoryPage = () => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.categoryData.category);
  const isLoading = useSelector((state) => state.categoryData.loading);
  const error = useSelector((state) => state.categoryData.error);

  useEffect(() => {
    dispatch(getAllCategory("/api/v1/categories"));
  }, [dispatch]);

  return (
    <div style={{ minHeight: "670px" }}>
      <CategoryContainer />
      <Pagination />
    </div>
  );
};

export default AllCategoryPage;

the errors:

[{
    "resource": "/c:/Users/dell/Downloads/08-ecommerce-design-only-master/design/src/Page/Category/AllCategoryPage.js",
    "owner": "typescript",
    "code": "2554",
    "severity": 8,
    "message": "Expected 0 arguments, but got 1.",
    "source": "ts",
    "startLineNumber": 14,
    "startColumn": 29,
    "endLineNumber": 14,
    "endColumn": 49
}]
[{
    "resource": "/c:/Users/dell/Downloads/08-ecommerce-design-only-master/design/src/Page/Category/AllCategoryPage.js",
    "owner": "typescript",
    "code": "2345",
    "severity": 8,
    "message": "Argument of type 'AsyncThunkAction<any, void, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction'.",
    "source": "ts",
    "startLineNumber": 14,
    "startColumn": 14,
    "endLineNumber": 14,
    "endColumn": 50
}]
[{
    "resource": "/c:/Users/dell/Downloads/08-ecommerce-design-only-master/design/src/Page/Category/AllCategoryPage.js",
    "owner": "typescript",
    "code": "2339",
    "severity": 8,
    "message": "Property 'categoryData' does not exist on type 'unknown'.",
    "source": "ts",
    "startLineNumber": 10,
    "startColumn": 50,
    "endLineNumber": 10,
    "endColumn": 62
}]

First time using this and work at project, so a nice explanation please.

i cant use and dispatch the data at my component

0

There are 0 best solutions below