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