Cómo gestionar el estado global en React con Zustand

Al hablar del estado global de una aplicación, nos referimos a los datos que necesitan ser accesibles en múltiples componentes, sin importar su ubicación en el árbol de componentes.

Durante años, la gestión de estado global en React tuvo un nombre Redux. Redux era potente, pero absurdamente complejo. Requiere escribir una cantidad inmensa de código repetitivo para hacer cosas sencillas.

Después llegó la Context API, que es fácil de usar pero tiene problemas de rendimiento si no se tiene cuidado.

Entonces llegó ❤️ Zustand a solucionarlo todo. Una librería que elimina la complejidad, elimina los <Provider> que hace que gestionar el estado global sea tan fácil como declarar una variable.

Instalación de Zustand

Para comenzar a usar Zustand, primero debemos instalarlo en nuestro proyecto:

Una vez instalada, ya podemos empezar a usarla. Así de fácil.

Creación de un store con Zustand

En Zustand, el estado vive en un concepto llamado Store. Un store es simplemente un objeto que contiene:

Por ejemplo, vamos a ver como crear un Store para gestionar un carrito de la compra (por no hacer otro contador).

Cread el archivo src/store/useCartStore.js.

import { create } from 'zustand';

// create recibe una función callback que nos da el método 'set'
export const useCartStore = create((set) => ({
  // 1. Estado inicial (Variables)
  items: 0,
  totalPrice: 0,

  // 2. Acciones (Funciones para modificar el estado)
  addItem: () => set((state) => ({ 
    items: state.items + 1 
  })),

  increasePrice: (amount) => set((state) => ({ 
    totalPrice: state.totalPrice + amount 
  })),

  removeAll: () => set({ items: 0, totalPrice: 0 }),
}));

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

Consumiendo el estado en componentes

Para usar el estado, simplemente importamos nuestro hook useCartStore.

import { useCartStore } from '../store/useCartStore';

function BadgeCarrito() {
  // Solo nos suscribimos a 'items'.
  // Si cambia el precio, este componente NO se re-renderiza
  const items = useCartStore((state) => state.items);

  return <span className="badge">{items}</span>;
}

Para usar las acciones (que son funciones y nunca cambian), podemos extraerlas igual:

function BotonComprar() {
  const addItem = useCartStore((state) => state.addItem);
  
  return <button onClick={addItem}>Añadir al carrito</button>;
}

 // ⚠️ Si cambia 'totalPrice', este componente renderiza igual
const { items, addItem } = useCartStore();

export const useUserStore = create((set) => ({
  user: null,
  loading: false,

  fetchUser: async (id) => {
    // 1. Ponemos estado de carga
    set({ loading: true });
    
    try {
      const response = await fetch(`https://api.fake.com/users/${id}`);
      const data = await response.json();
      // 2. Guardamos datos
      set({ user: data, loading: false });
    } catch (error) {
      set({ loading: false }); // Manejo de error simple
    }
  }
}));

Persistencia de datos en LocalStorage

¿Queréis que el carrito de la compra no se pierda si el usuario recarga la página? Zustand trae un middleware llamado persist que guarda automáticamente vuestro estado en localStorage (o sessionStorage) y lo hidrata al arrancar.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useCartStore = create(
  persist(
    (set) => ({
      items: 0,
      addItem: () => set((state) => ({ items: state.items + 1 })),
    }),
    {
      name: 'cart-storage', // Nombre de la key en localStorage
    }
  )
);

DevTools

Si echáis de menos la extensión de navegador de Redux para ver cómo cambia el estado en el tiempo, ¡buenas noticias! Zustand es compatible con Redux DevTools mediante otro middleware.

import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({ ... })));