Publicación: about 1 month

Providers en React

Qué es
Es un componente que permite compartir información especifica a través del árbol de componentes sin pasar props manualmente en todos los componentes.

Cuando utilizarlos

Cuando necesitamos compartir una funcionalidad especifica por todo el árbol de componentes. Ej: Temas visuales, autentificación, internalización.
Cuando la comunicación del árbol de componentes se esta volviendo muy dinámica. Ej: un componente necesita comunicarse con otro y ese otro reaccionar y comunicar con otro.
Cuando necesitamos reutilizar funcionalidad especifica. Ej: Encapsular todo lo relacionado a la autentificación de usuarios.
Cuando es necesario tener control sobre el ciclo de vida de la información. Ej: Poder cambiar eliminar, agregar, modificar los temas visuales.

Cómo utilizarlos

Supongamos que estamos desarrollando un carrito de compras para una aplicación. Este carrito debe permitir agregar productos desde cualquier parte de la interfaz. Además, debe reflejar la cantidad total de productos agregados como el monto total a pagar. Visualmente, el carrito debe estar ubicado en la esquina superior derecha de la página.

1. Creación del provider

// providers/CartProvider.js

import React, { createContext, useContext, useState } from "react";

// 1. Crear el contexto
const CartContext = createContext();

// 2. Crear el Provider
export const CartProvider = ({ children }) => {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const clearCart = () => setCart([]);

  return (
    <CartContext.Provider value={{ cart, addToCart, clearCart }}>
      {children}
    </CartContext.Provider>
  );
};

 // 3. Hook para consumir el contexto
export const useCart = () => useContext(CartContext);

2. Creación del componente para listar productos

// components/ProductList.js

import React from “react";
Import { useCart } from ‘providers/CartProvider’

export const ProductList = () => {
  const products = [
    { id: 1, name: "Camisa" },
    { id: 2, name: "Pantalón" },
  ];
  const { addToCart } = useCart();

  return (
    <div>
      <h2>Productos</h2>
      {products.map((p) => (
        <div key={p.id}>
          {p.name} <button onClick={() => addToCart(p)}>Agregar al carrito</button>
        </div>
      ))}
    </div>
  );
};

3. Creación del componente Cart para visualizar el total y el total

// components/Cart.js

Import React from “react”
 import { useCart, clearCart } from “providers/CartProvider”

const Cart = () => {
  const { cart, clearCart } = useCart();

  const totalItems = cart.length;
  const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);

  return (
    <div>
      <h3>Carrito</h3>
      {totalItems === 0 ? (
        <p>Vacío</p>
      ) : (
        <>
          <ul>
            {cart.map((item, idx) => (
              <li key={idx}>
                {item.name} - ${item.price}
              </li>
            ))}
          </ul>
          <p>Total de productos: {totalItems}</p>
          <p>Total a pagar: ${totalPrice}</p>
          <button onClick={clearCart}>Vaciar carrito</button>
        </>
      )}
    </div>
  );
};

4. Componente AppBar que renderiza el Cart

// components/AppBar.js
import React from “react”
import Cart from “components/Cart”

const AppBar = () => {
  return (
    <header>
      <h1>Mi Tienda</h1>
      <Cart />
    </header>
  );
};

5. App principal

// App.js
import React from “react”
import AppBar from “components/AppBar”
import AppBar from “components/ProductList”
import {CartProvider} from “providers/CartProvider”

export default function App() {
  return (
    <CartProvider>
      <AppBar />
      <main>
        <ProductList />
      </main>
    </CartProvider>
  );
}