when i call a get request on redux my call inside of createAsyncThunk stucks i dont get any error or return undefined and my state stays in pending. Also in this code "run1" logs into console but "run2" does not
reducer
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";
export const getProducts = createAsyncThunk("getProducts", async () => {
console.log("run1");
const data = await axios.get(`localhost:4000/api`);
console.log("run2");
return data;
});
export const productsSlice = createSlice({
name: "products",
initialState: {
loading: true,
productsData: [],
},
reducers: {},
extraReducers: (builder) => {
builder.addCase(getProducts.pending, (state) => {
state.loading = true;
});
builder.addCase(getProducts.fulfilled, (state, action) => {
state.loading = false;
state.productsData = action.payload;
});
},
});
export default productsSlice.reducer;
react file
const dispatch = useDispatch();
const { loading, productsData } = useSelector((state) => state.products);
useEffect(() => {
dispatch(getProducts());
}, []);