Obtengo los datos de la API como se esperaba, pero el problema aquí es que los obtengo en un tercer intento, lo que provoca el error en mi aplicación cuando no hay datos para mostrar.

Lo estoy probando imprimiendo en una consola pero es el mismo error. Tan pronto como actualizo mi página, el error se inunda en la consola

reductor

 export const productDetailsReducer = (state = { products: {} }, action) => { switch (action.type) { case PRODUCT_DETAILS_REQUEST: return { ...state, loading: true, }; case PRODUCT_DETAILS_SUCCESS: return { loading: false, product: action.payload, }; case PRODUCT_DETAILS_FAIL: return { ...state, error: action.payload, }; case CLEAR_ERRORS: return { ...state, error: null, }; default: return state; } };

Componente

 const ProductDetails = () => { const dispatch = useDispatch(); const alert = useAlert(); const { id } = useParams(); const { product, loading, error } = useSelector( (state) => state.productDetails ); useEffect(() => { dispatch(getProductDetails(id)); if (error) { alert.error(error); dispatch(clearErrors()); } }, [dispatch, id, alert, error]); console.log(product);

Acción

 export const getProductDetails = (id) => async (dispatch) => { try { dispatch({ type: PRODUCT_DETAILS_REQUEST }); const { data } = await axios.get(`/api/v1/product/${id}`); dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data.product, }); } catch (error) { dispatch({ type: PRODUCT_DETAILS_FAIL, payload: error.response.data.message, }); } };

Aplicación.js

 function App() { return ( <Router> <div className="App"> <Header /> <div className="container container-fluid"> <Routes> <Route path="/" element={<Home />} exact /> <Route path="/product/:id" element={<ProductDetails />} /> </Routes> </div> <Footer /> </div> </Router> ); }