I am trying to display all my products from a fake api to my homescreen. I am using react redux to manage the state. When i console log the products object I get null so i dont think im getting anything from the call.
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 productListReducerInitialy products array is not defined, so you should add a condition like this
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>
);
}