im trying to make a axios request to my eccomerce api using axios, but its returning empty, i tried many things but its not working, these are my files:
Store.js(i tried to use configureStore but it was getting errors):
const reducer = combineReducers({
products: productsReducer
})
let initialState = {}
const middlware = [thunk];
const store = createStore(reducer, initialState, composeWithDevTools(applyMiddleware(...middlware)))
export default store;
ProductsReducer:
import {
ALL_PRODUCTS_FAIL,
ALL_PRODUCTS_REQUEST,
ALL_PRODUCTS_SUCCESS,
CLEAR_ERRORS} from '../constants/productConstants';
export const productsReducer = (state = { products:[] }, action) => {
switch(action.type){
case ALL_PRODUCTS_REQUEST:
return {
loading: true,
products: []
}
case ALL_PRODUCTS_SUCCESS:
return {
loading: false,
products: action.payload.products,
productsCount: action.payload.productsCount,
}
case ALL_PRODUCTS_FAIL:
return {
loading: false,
error: action.payload
}
case CLEAR_ERRORS:
return {
...state,
error: null
}
default:
return state;
}
}
the variables:
export const ALL_PRODUCTS_REQUEST = 'ALL_PRODUCTS_REQUEST'
export const ALL_PRODUCTS_SUCCESS = 'ALL_PRODUCTS_SUCCESS'
export const ALL_PRODUCTS_FAIL = 'ALL_PRODUCTS_FAIL'
export const CLEAR_ERRORS = 'CLEAR_ERRORS'
Actions.js(the url is fine i checked, the rest of the url is in the package.json):
export const getProducts = () => async(dispatch) => {
try {
dispatch({type: ALL_PRODUCTS_REQUEST})
const { data } = await axios.get('/api/products')
dispatch({
type: ALL_PRODUCTS_SUCCESS,
payload: data
})
} catch (error) {
dispatch({
type: ALL_PRODUCTS_FAIL,
payload: error.response.data.message
})
}
}
// Clear Errors
export const clearErrors = () => async (dispatch) => {
dispatch({
type: CLEAR_ERRORS
})
}
and the home.js that its not returning anything in the redux devtools, so i cant fetch the data
const dispatch = useDispatch();
useEffect(() => {
dispatch(getProducts)
}, [dispatch])
>Solution :
It seems like you are missing the parentheses to invoke the getProducts function in your useEffect hook. You can try changing dispatch(getProducts) to dispatch(getProducts()).
Also, make sure that you have properly imported the getProducts action function in your Home component.
code with the changes mentioned :
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { getProducts } from '../actions/productActions';
const Home = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getProducts());
}, [dispatch]);
return <h1>Home</h1>;
};
export default Home;
Make sure that the API endpoint /api/products is returning the expected data. You can also add some console logs in your action to check if the API request is being made and if the response data is being stored in the Redux store.
import {
ALL_PRODUCTS_FAIL,
ALL_PRODUCTS_REQUEST,
ALL_PRODUCTS_SUCCESS,
CLEAR_ERRORS
} from '../constants/productConstants';
import axios from 'axios';
export const getProducts = () => async(dispatch) => {
try {
dispatch({type: ALL_PRODUCTS_REQUEST});
const { data } = await axios.get('/api/products');
console.log(data); // check the response data
dispatch({
type: ALL_PRODUCTS_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: ALL_PRODUCTS_FAIL,
payload: error.response.data.message,
});
}
};
// Clear Errors
export const clearErrors = () => async (dispatch) => {
dispatch({
type: CLEAR_ERRORS,
});
};