Estoy tratando de mostrar todos mis productos desde una API falsa en mi pantalla de inicio. Estoy usando reaccionar redux para administrar el estado. Cuando registro en la consola el objeto de productos, obtengo un valor nulo, por lo que no creo que obtenga nada de la llamada.
import React, { useEffect } from 'react'; import Product from '../components/product'; import { useDispatch, useSelector } from 'react-redux'; import { listProducts } from '../actions/productActions'; export default function HomeScreen() { const dispatch = useDispatch(); const productList = useSelector(state => state.productList); const { products } = productList; useEffect(() => { dispatch(listProducts({})); },[dispatch]); return ( <div> <div className="row center"> {products.map((product) => ( <Product key={product.id} product={product}></Product> ))} </div> </div> ); } import { PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from "../constants/productConstants"; const productListReducer = ( state= {loading: true, products: [] }, action ) => { switch(action.type) { case PRODUCT_LIST_REQUEST: return{loading:true} case PRODUCT_LIST_SUCCESS : return {loading:false,products:action.payload} case PRODUCT_LIST_FAIL : return {loading:false,error:action.payload} default: return state } } export default productListReducerInicialmente, la matriz de productos no está definida, por lo que debe agregar una condición como esta
export default function HomeScreen() { const dispatch = useDispatch(); const productList = useSelector(state => state.productList); const { products } = productList; useEffect(() => { dispatch(listProducts({})); },[dispatch]); return ( <div> <div className="row center"> {!!products && products.map((product) => ( <Product key={product.id} product={product}></Product> ))} </div> </div> ); }