Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from "react";
- // nodejs library that concatenates classes
- import Grid from "@material-ui/core/Grid";
- import Container from "@material-ui/core/Container";
- import Card from "@material-ui/core/Card";
- import CardContent from "@material-ui/core/CardContent";
- import Typography from "@material-ui/core/Typography";
- // @material-ui/core components
- import { makeStyles } from "@material-ui/core/styles";
- // @material-ui/icons
- // core components
- import styles from "../assets/cardStyle";
- import { useDispatch, useSelector } from "react-redux";
- import { useEffect, useCallback } from "react";
- import { getAllProducts } from "../store/actions/fetch/index";
- const useStyles = makeStyles(styles);
- export default function Cards() {
- const classes = useStyles();
- const dispatch = useDispatch();
- const loadProducts = useCallback(() => {
- dispatch(getAllProducts());
- }, [dispatch]);
- useEffect(() => {
- loadProducts();
- }, [loadProducts]);
- const products = useSelector(state => state.data.products); // OR state.data.filteredProducts
- console.log("products:", products);
- if (products && products.length > 0) {
- return (
- <div>
- {products.map(product => (
- <li key={product.id}>{product.name}</li>
- ))}
- </div>
- );
- } else {
- return <div>No products</div>;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement