SHARE
TWEET

Untitled

a guest Dec 7th, 2019 85 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. // nodejs library that concatenates classes
  3. import Grid from "@material-ui/core/Grid";
  4. import Container from "@material-ui/core/Container";
  5. import Card from "@material-ui/core/Card";
  6. import CardContent from "@material-ui/core/CardContent";
  7. import Typography from "@material-ui/core/Typography";
  8.  
  9. // @material-ui/core components
  10. import { makeStyles } from "@material-ui/core/styles";
  11. // @material-ui/icons
  12.  
  13. // core components
  14. import styles from "../assets/cardStyle";
  15. import { useDispatch, useSelector } from "react-redux";
  16. import { useEffect, useCallback } from "react";
  17. import { getAllProducts } from "../store/actions/fetch/index";
  18. const useStyles = makeStyles(styles);
  19.  
  20. export default function Cards() {
  21.   const classes = useStyles();
  22.  
  23.   const dispatch = useDispatch();
  24.  
  25.   const loadProducts = useCallback(() => {
  26.     dispatch(getAllProducts());
  27.   }, [dispatch]);
  28.  
  29.   useEffect(() => {
  30.     loadProducts();
  31.   }, [loadProducts]);
  32.  
  33.   const products = useSelector(state => state.data.products); // OR  state.data.filteredProducts
  34.  
  35.   console.log("products:", products);
  36.  
  37.   if (products && products.length > 0) {
  38.     return (
  39.       <div>
  40.         {products.map(product => (
  41.           <li key={product.id}>{product.name}</li>
  42.         ))}
  43.       </div>
  44.     );
  45.   } else {
  46.     return <div>No products</div>;
  47.   }
  48. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top