Carrito de Compras — React + Zustand
Este proyecto demuestra el uso de Zustand como gestor de estado global en una aplicación de
React, con diseño moderno en TailwindCSS y persistencia automática mediante
localStorage.
Objetivo del proyecto
Crear una aplicación funcional de carrito de compras que permita agregar, eliminar, vaciar productos y procesar el checkout, utilizando Zustand para centralizar el estado y eliminar la dependencia de props entre componentes.
Tecnologías y herramientas
- React — interfaz basada en componentes y hooks.
- Zustand — estado global minimalista y eficiente con persistencia.
- TailwindCSS — sistema de diseño basado en utilidades.
- Lucide Icons — íconos SVG integrados como componentes React.
- localStorage — almacenamiento persistente del carrito.
Estructura del proyecto
src/
├── store/
│ └── cartStore.js
├── components/
│ ├── Header.jsx
│ ├── ProductCard.jsx
│ └── Toast.jsx
├── pages/
│ ├── Home.jsx
│ ├── Cart.jsx
│ └── Checkout.jsx
├── App.jsx
└── main.jsxVentajas de usar Zustand
- Simplicidad: No requiere providers ni contextos anidados.
- Escalabilidad: Permite crear múltiples stores independientes.
- Rendimiento: Re-renderiza solo los componentes que usan el estado afectado.
- Persistencia: Integración nativa con
localStoragemediante middleware. - API limpia: Se maneja con hooks personalizados (por ejemplo,
useCartStore()).
Diferencias: Zustand vs useState/props
| Característica | Antes (useState + props) | Ahora (Zustand) |
|---|---|---|
| Manejo de estado | En cada componente individual | Centralizado en un store global |
| Comunicación entre componentes | Por props (prop drilling) | Con un hook global (useCartStore()) |
| Persistencia | Manual con useEffect y localStorage | Automática con middleware persist() |
| Reutilización | Difícil, código repetido | Fácil, lógica centralizada |
| Configuración | Sencilla pero limitada | Ligera (sin boilerplate) y más flexible |
Conclusión
El uso de Zustand simplifica drásticamente la gestión del estado global en React sin la complejidad de Context o Redux. En este proyecto, el store centraliza toda la lógica del carrito y las notificaciones, reduciendo código repetido y mejorando la mantenibilidad, escalabilidad y rendimiento general de la aplicación.