Zustand: Librerías de estado

Hasta ahora, hemos visto que cuando necesitamos acceder al estado desde varios componentes, podemos optar a pasarlo por props (prop drilling), o utilizar Context API para compartirlo con todos los elementos hijos, por si se vuelve tedioso enviar la información a través de varios componentes.

Sin embargo, es posible que estos dos métodos se nos queden cortos y necesitemos una forma mejor para compartir el estado de nuestra aplicación entre varios componentes, teniendo en cuenta que cambia con frecuencia y necesitamos más control.

¿Qué es un Store?

Cuando necesitamos manejar el estado de nuestra aplicación de forma global se le suele denominar Store (Almacén), ya que lo que utilizamos es una especie de almacén centralizado de información. Necesitamos una forma de acceder a esa información, a ese estado desde cualquier parte de nuestra aplicación.

Probablemente esto te recuerde a un patrón muy clásico y básico: las variables globales:

let estado = 0;

function incrementar() {
  estado++;
  console.log(estado);
}

incrementar();  // 1
incrementar();  // 2

Aunque en este ejemplo es sencillo gestionar el estado, a medida que una aplicación crece, manejar el estado correctamente se vuelve complejo y se puede volver difícil.

Las principales desventajas de las variables globales son:

• ❌ Acceso descontrolado: Cualquier parte del código puede modificar el estado.
• ❌ Colisiones de nombres: Dos partes de la aplicación pueden intentar usar el mismo nombre.
• ❌ Difícil de mantener: Las variables se dispersan por toda la app, por lo que si necesitas modificarla, puede ser complejo o incluso tener efectos secundarios en los cambios.

Las librerías de manejo de estado intentan abordar la sencillez con la que puedes acceder al estado con las variables globales, eliminando estas (y otras) desventajas.

Instalación de Zustand

Tradicionalmente, han existido muchas librerías de manejo de estado, como por ejemplo Redux y MobX en React o Vuex y Pinia en Vue. Sin embargo, una que se ha hecho muy popular en los últimos años ha sido Zustand. Para comenzar a utilizarla, simplemente instalaremos Zustand con npm, pnpm o alguna de sus alternativas:

$ npm install zustand

Una vez instalada, vamos a crear una carpeta src/store/ donde crearemos un fichero con nuestro estado. Por ejemplo, lo podemos llamar useStore.js:

src/
|----- store/
       |----- useStore.js
|----- components/
       |----- Counter.jsx
|----- App.jsx
|----- index.jsx
|----- index.html

Creación del Store

En el fichero useStore.js vamos a añadir la lógica necesaria para trabajar con nuestro estado. Observa que importamos el create() y lo utilizaremos para crear un almacen con nuestros datos:

• 1️⃣ counter es nuestro estado, sólo modificable desde nuestro store
• 2️⃣ increment(), decrement() y reset() son las funciones (acciones) que modifican el estado
• 3️⃣ Dichas acciones son las que deberemos utilizar desde nuestros componentes

import { create } from "zustand";

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

export default useStore;

Ahora, lo único que tenemos que hacer es, en cada componente que queramos utilizar, modificar o acceder a los datos, importamos el useStore y desestructuramos los datos que queramos utilizar:

import useStore from "../store/useStore.js";

export function Counter() {
  const { counter, increment, decrement } = useStore();

  return (
    <>
      <h3>El valor es {counter}</h3>
      <button onClick={increment}>Incrementar</button>
      <button onClick={decrement}>Decrementar</button>
    </>
  );
}

Alternativas a Zustand

Zustand es una de las librerías más populares en el ecosistema React debido a su simplicidad y facilidad de uso. De hecho, se trata de una librería agnóstica que también puede utilizarse sin necesidad de React. Aún así, existen múltiples librerías alternativas a Zustand: