Example of the useDispatch hook

redux-dispatch-hook.jsx

import React from 'react';
import { useDispatch } from 'react-redux';
import { addToCart } from './cart-actions';

const products = [
  {
    id: 1,
    name: 'Coffe Bottle',
    price: 29
  }
];

function ProductList() {
  const dispatch = useDispatch(); // Aqui pedimos para o react-redux  pela função dispatch
  
  function addProductToCart(product) {
    // Chamamos a função dispatch passando o "payload" retornado pela função addToCart
    // algo como { type: 'ADD_TO_CART', product: {...} }
    // A função dispatch se responsabiliza por chamar a função respectiva para
    // alterar o state da store
    dispatch(addToCart(product));
  }

  return (
    <section>
      {
        products
          .map(product => (
              <div key={product.id}>
                <h1>
                  Coffe Bottle
                </h1>
                <button onClick={() => addProductToCart(product)}>
                  Add to Cart
                </button>
              </div>
          ))
      }
    </section>
  );
}