Any more optimized way to handle the mutiple slices in react components - reactjs

Question

I have created slices for POST and GET operation -
export const getAllAnnotationType = createAsyncThunk<IGetAllAnnotationType>(
"annotationType/getAll",
async (annotationType, { rejectWithValue }) => {
try {
const response = await Services.get("/globalAnnotationTypes");
return response.data.slice().reverse() as IGetAllAnnotationType;
} catch (err) {
const error = err as any;
return rejectWithValue(error?.response?.data);
}
}
);
export const createAnnotationType = createAsyncThunk<
ICreateAnnotationType,
{ name: string; des: string }
>("annotationType/create", async (annotationType, { rejectWithValue }) => {
try {
const { name, des } = annotationType;
const response = await Services.post("/globalAnnotationTypes", {
name,
des,
});
return response.data as ICreateAnnotationType;
} catch (err) {
const error = err as any;
return rejectWithValue(error?.response?.data);
}
});
I have created one common slice for both of the operations.
And I am using these in my react components like this -
useEffect(() => {
switch (typeLoader) {
case 'pending':
setLoader(true);
break;
case 'succeeded':
if (getAllData) {
dispatch(resetAnnotationType());
setLoader(false);
setRows(getAllData);
}
if (createData) {
showToast();
dispatch(getAllAnnotationType());
setNoticeMsg(createData);
}
break;
case 'failed':
showToast();
}
}, [typeLoader]);
I am looking for more optimized way to use them in react components. In future, I will have DELETE and PUT operations, and I will have to use more conditions inside 'succeeded' state. Any other way I can do this ?

Answer 1

My favorite way to handle fetching data is Redux Toolkit Query.
It creates slices. You can custom the fetch function if needed, and you are given hooks, to work with in the component directly.
You can also cache the fetched data. A simple example of use can be (in the component):
const {data, isLoading, error} = useGetDataQuery(args) //if you needed args
If you had further questions about sharing cached data across the application, you can comment here, I'll be happy to share how I solved my problem (using something called fixedCacheQuery).
Even though you can find the boilerplate on the website, if you needed, let me know and I will edit this response to share the boilerplate as I write and use it.