Contador de productos en el carrito

Curso de React.js con Vite.js y TailwindCSS

Introducción

Construye una tienda online con React

Enrutamiento y estructura base

Instalación de React con Vite y TailwindCSS

Análisis de rutas y componentes en React

Enrutamiento con React Router DOM

Componente Navbar

Componente de Layout

Componente de Card

Consumiendo la FakeStore API para pintar cards

Manejo de estado global con Context

Contexto global de la aplicación

Contador de productos en el carrito

Abriendo el detalle de cada producto

Reto: heroicons con TailwindCSS

Maquetando el ProductDetail

Mostrando productos en ProductDetail

Carrito de Compras

Agregando productos al carrito

SideMenu del carrito de compras

Componente OrderCard

Evitando productos duplicados en el carrito

Eliminar productos del carrito

Suma total de productos en el carrito

Checkout y Órdenes de Compra

Flujo para crear una nueva orden

Checkout de productos en el carrito

Página de MyOrders: lista de órdenes

Página de MyOrder: órden individual

Reto: órdenes de compra con TailwindCSS

Filtrando productos desde el frontend

Buscador de productos

Filtrando títulos con JavaScript

Filtrando categorías con JavaScript

Corrigiendo bugs de la aplicación

Próximos pasos

Deploy de React en Netlify

¿Preparada o preparado para un Laboratorio de React?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Cómo implementar estado global en una aplicación React?

Para mejorar la eficiencia y la coherencia de tu aplicación, es crucial manejar el estado global de manera adecuada. En esta guía, exploraremos cómo transferir el estado local al global utilizando React Context para un carrito de compras. Este enfoque permitirá que cualquier componente de tu aplicación acceda y modifique el estado global de manera fácil y simultánea.

¿Cómo se utiliza el estado global con context?

El primer paso es trasladar el estado local al contexto, permitiéndonos compartirlo entre distintos componentes:

Creación del estado dentro del contexto: En lugar de solamente usar el estado local, utiliza useState dentro de un proveedor. Define variables como count para representar la cantidad de artículos en el carrito, y setCount para actualizar ese estado.

import React, { useState } from 'react';

const CartProvider = ({ children }) => {
    const [count, setCount] = useState(0);

    return (
        <CartContext.Provider value={{ count, setCount }}>
            {children}
        </CartContext.Provider>
    );
};

Provisión del estado global: Asocia el contexto a los componentes de la aplicación encapsulándolos dentro del proveedor. De esta forma, puedes pasar tanto el valor de count como la función setCount a través del contexto.

import React from 'react';

export const CartContext = React.createContext();

const App = () => (
    <CartProvider>
        // Aquí van los diferentes componentes de la aplicación
    </CartProvider>
);

¿Cómo incremento el contador desde un componente?

Para actualizar el contador cuando un usuario interactúa con la aplicación, como hacer clic en un botón "más" del carrito, se utiliza el context en el componente deseado:

Crear un evento de escucha:

Dentro del componente, utiliza el evento onClick para detectar las interacciones del usuario.

import React, { useContext } from 'react';
import { CartContext } from './path/to/context';

const CartItem = () => {
    const { count, setCount } = useContext(CartContext);

    const handleClick = () => {
        setCount(count + 1);
    };

    return (
        <div onClick={handleClick}>
            <button>+</button>
        </div>
    );
};

Pasar el contexto al componente:

Usa useContext para acceder y modificar el estado dentro del componente que contiene la lógica del contador.

¿Cómo reflejar los cambios en otros componentes?

Cuando el estado se modifica, es importante reflejar estos cambios en otros elementos, por ejemplo, en un navbar:

Actualizar visualmente el estado:

En el componente de la barra de navegación, importa y utiliza el contexto para mostrar el valor actual del contador.

import React, { useContext } from 'react';
import { CartContext } from './path/to/context';

const Navbar = () => {
    const { count } = useContext(CartContext);

    return (
        <nav>
            <div>Items en carrito: {count}</div>
        </nav>
    );
};

Mantener consistencia:

Asegúrate de importar correctamente el contexto y utilizar los hooks de React al inicio del código para mantener la coherencia y el acceso al estado global en todos los componentes que lo requieran.

Recursos adicionales y mejores prácticas

Debugeo: Incorpora mensajes en el registro de la consola para verificar que el estado y los valores se actualicen como esperas mientras depuras la aplicación.
```
console.log('count:', count);
```
Consistencia de importaciones: Asegúrate de que las importaciones sean consistentes en todo el proyecto para evitar errores de implementación.

Con esta guía, has aprendido a establecer un estado global coherente dentro de tu aplicación React. La implementación adecuada del contexto permite que múltiples componentes lean y modifiquen fácilmente el estado, mejorando la experiencia del usuario y la mantenibilidad del código. ¡Sigue explorando y mejorando tus proyectos con estos conceptos avanzados!

Aportes 53

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Hernan Dario Caicedo Sanchez

Si ya tienes una cuenta,

Curso de React.js con Vite.js y TailwindCSS

Contador de productos en el carrito

¿Cómo implementar estado global en una aplicación React?

¿Cómo se utiliza el estado global con context?

¿Cómo incremento el contador desde un componente?

¿Cómo reflejar los cambios en otros componentes?

Recursos adicionales y mejores prácticas

Card.jsx

Context.jsx