Saltar al contenido principal

Introducción a Zustand

¿Qué es Zustand?​

Zustand es una biblioteca pequeña, rápida y escalable de gestión de estado para aplicaciones React. A diferencia de otras soluciones como Redux, Zustand ofrece una API minimalista que simplifica la configuración y el uso del estado global (https://zustand-demo.pmnd.rs/).

Versión utilizada en el proyecto: 4.3.5

Características principales​

  • API simple: Define tu store en una sola función sin boilerplate
  • Performante: Solo actualiza los componentes cuando los datos que usan cambian
  • Sin Provider: No necesita un Provider que envuelva la aplicación
  • Middlewares: Soporta middlewares como persist, devtools, etc.

Ventajas en nuestro proyecto​

  • Gestión centralizada del estado
  • Persistencia selectiva del estado
  • Organización modular a través de slices
  • Herramientas de desarrollo integradas
  • Actualización eficiente de los componentes

Instalación​

yarn add zustand

Importación básica​

import { create } from 'zustand';

Middlewares utilizados​

En nuestro proyecto usamos principalmente dos middlewares:

  • devtools: Para integración con Redux DevTools en desarrollo
  • persist: Para persistir el estado en localStorage/sessionStorage
import { devtools, persist } from 'zustand/middleware';