Nevermind

¿Adiós al boilerplate de Redux? Guía detallada del gestor de estado ligero Zustand

3 min

1. Los «problemas» de Redux

Redux es, sin duda, la biblioteca de gestión de estado más conocida y potente del ecosistema React. Funciones como su flujo de datos unidireccional y la depuración con viaje en el tiempo la convierten en una opción fiable para aplicaciones grandes y complejas. Sin embargo, en muchos proyectos pequeños y medianos, el «código repetitivo» (Boilerplate) de Redux suele causar dolores de cabeza:

  • Actions & Action Creators: Definir numerosos tipos de action y funciones creadoras.
  • Reducers: Escribir enormes sentencias switch para gestionar distintas actions.
  • Dispatch & Selectors: Hacer dispatch de actions mediante dispatch y suscribirse a cambios de estado con useSelector dentro de los componentes.
  • Context Provider: Envolver la raíz de la aplicación en un <Provider>.

Todo esto hace que añadir incluso un estado sencillo exija modificar varios archivos y convierte el proceso en algo engorroso.

2. Zustand: un soplo de aire fresco

Zustand («estado» en alemán) es una biblioteca ligera de gestión de estado desarrollada por el equipo de Poimandres, creadores de react-three-fiber. Su filosofía de diseño es el minimalismo y la no intrusión.

Características principales:

  • Muy poco código: Para implementar una función, Zustand suele requerir solo una fracción del código necesario con Redux.
  • Basado en Hooks: Todo gira en torno a un Hook personalizado, de acuerdo con las prácticas del desarrollo moderno con React.
  • No requiere Context Provider: No necesitas envolver la parte superior de la aplicación en ningún Provider. El Store es independiente del árbol de componentes y se puede importar y utilizar desde cualquier lugar.
  • Fácil de aprender: La API es extremadamente sencilla y su uso principal se aprende en pocos minutos.

3. Uso principal

El uso de Zustand se divide en dos pasos: crear el Store y utilizarlo en un componente.

a. Crear el Store

Puedes definir el store en cualquier archivo .js o .ts.

// src/store.js
import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearStore;

La función create recibe un callback cuyo argumento es la función set, similar al setState de React. Aquí defines el estado y los métodos que lo actualizan.

b. Utilizarlo en un componente

Úsalo en cualquier componente como si fuera un Hook normal.

// src/components/BearCounter.jsx
import useBearStore from '../store';

function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} around here ...</h1>;
}

Observa que nos suscribimos mediante la función selectora (state) => state.bears al estado bears. Esto es importante porque garantiza que el componente solo vuelva a renderizarse cuando cambie bears, evitando costes de rendimiento innecesarios.

// src/components/Controls.jsx
import useBearStore from '../store';

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>;
}

Obtener una action es igual de sencillo.

4. Actions asíncronas

Zustand también gestiona las operaciones asíncronas de forma muy natural. No necesitas ningún middleware como redux-thunk o redux-saga.

const useAsyncStore = create((set) => ({
  data: null,
  fetchData: async (url) => {
    const response = await fetch(url);
    const data = await response.json();
    set({ data });
  },
}));

Conclusión

Zustand no pretende sustituir completamente a Redux. Redux conserva sus ventajas en cuanto a normas estrictas, trazabilidad y un enorme ecosistema.

Sin embargo, para la gran mayoría de las aplicaciones React, Zustand ofrece una opción más sencilla y rápida, con menor carga mental. Si estás cansado de las formalidades de Redux o tu próximo proyecto necesita un gestor de estado ágil y flexible, Zustand es sin duda una excelente alternativa que merece la pena probar.

React Gestión de estado Zustand Redux