Guest User

Untitled

a guest
Dec 7th, 2019
91
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