lunes 12 agosto 2024

Cómo utilizar Zustand en React

¿Qué es Zustand?
Paso 1: Instalación de Zustand
Paso 2: Crear una Tienda (Store) con Zustand
Paso 3: Actualización Condicional del Estado
Paso 4: Usar Middleware en Zustand
Paso 5: Gestionar Estados Complejos
Conclusión

Zustand es una biblioteca de gestión de estado para aplicaciones React que es ligera, fácil de usar y muy poderosa. A diferencia de Redux o Context API, Zustand ofrece una API simple y sin ceremonias, lo que facilita su integración en proyectos React de cualquier tamaño. En este artículo, aprenderás cómo utilizar Zustand en React para gestionar el estado de tu aplicación de manera eficiente.

¿Qué es Zustand?

Zustand es una biblioteca de gestión de estado para React que te permite crear y manejar el estado global con una API mínima y sin la necesidad de usar reducers o middlewares como en Redux. Es ideal para aquellos que buscan una solución de estado global sin la complejidad de otras opciones más robustas.

Ventajas de Usar Zustand

Simplicidad: Configuración mínima y API intuitiva.
Ligereza: Pequeño tamaño de la biblioteca, lo que resulta en una menor sobrecarga para tu aplicación.
Rendimiento: Optimizado para rendimiento, evitando renders innecesarios.
Escalabilidad: Puede crecer con tu aplicación sin volverse complejo.

Paso 1: Instalación de Zustand

El primer paso para usar Zustand en tu proyecto React es instalarlo mediante npm o yarn.

1.1. Instalación con npm

Puedes instalar Zustand ejecutando el siguiente comando en la terminal dentro de la carpeta de tu proyecto React:

npm install zustand

1.2. Instalación con yarn

Si prefieres usar yarn, ejecuta:

yarn add zustand

Paso 2: Crear una Tienda (Store) con Zustand

Una "tienda" en Zustand es un contenedor para el estado de tu aplicación. Puedes crear una tienda utilizando la función create.

2.1. Crear la Tienda Básica

En este ejemplo, vamos a crear una tienda para manejar el estado de un contador:

import create from 'zustand';

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

Aquí:

useStore es un hook personalizado que accede al estado de la tienda.
count es la variable de estado que estamos manejando.
incrementar y decrementar son funciones que modifican el estado utilizando la función set.

2.2. Usar la Tienda en un Componente

Ahora que hemos creado nuestra tienda, vamos a utilizarla en un componente React:

import React from 'react';
import { useStore } from './store';

function Contador() {
  const { count, incrementar, decrementar } = useStore();

  return (
    <div>
      <h1>Contador: {count}</h1>
      <button onClick={incrementar}>Incrementar</button>
      <button onClick={decrementar}>Decrementar</button>
    </div>
  );
}

export default Contador;

En este ejemplo:

useStore es llamado dentro del componente Contador para acceder a count y a las funciones incrementar y decrementar.
Los botones permiten modificar el estado de count llamando a las funciones correspondientes.

Paso 3: Actualización Condicional del Estado

Zustand permite controlar cuándo y cómo se actualiza el estado, lo que te da flexibilidad para evitar renders innecesarios.

3.1. Seleccionar Parte del Estado

Si solo necesitas acceder a una parte del estado, puedes seleccionar específicamente la parte que te interesa:

import React from 'react';
import { useStore } from './store';

function MostrarContador() {
  const count = useStore((state) => state.count);

  return <h1>Contador: {count}</h1>;
}

export default MostrarContador;

En este caso, el componente MostrarContador solo se volverá a renderizar cuando count cambie.

3.2. Comparación Personalizada

Zustand también permite usar comparadores personalizados para determinar cuándo un componente debe volver a renderizarse:

import React from 'react';
import { useStore } from './store';

function IncrementarBoton() {
  const incrementar = useStore((state) => state.incrementar, (prev, next) => prev === next);

  return <button onClick={incrementar}>Incrementar</button>;
}

export default IncrementarBoton;

Aquí, el botón IncrementarBoton solo se renderizará si incrementar cambia, lo cual en este caso no debería ocurrir, evitando renders innecesarios.

Paso 4: Usar Middleware en Zustand

Zustand soporta middleware para extender la funcionalidad de la tienda. Por ejemplo, puedes usar un middleware para persistir el estado en el almacenamiento local.

4.1. Persistencia del Estado

Puedes agregar persistencia al estado usando el middleware persist:

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      incrementar: () => set((state) => ({ count: state.count + 1 })),
      decrementar: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      name: 'contador-storage', // nombre de la clave en localStorage
    }
  )
);

Con este middleware, el estado count se almacenará en localStorage, lo que significa que se conservará incluso si el usuario recarga la página.

4.2. Middleware para Registro de Acciones

Otro ejemplo de middleware es devtools, que permite registrar las acciones y estados, facilitando el desarrollo:

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

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

Este middleware agrega soporte para herramientas de desarrollo como Redux DevTools, permitiendo que veas el estado y las acciones en tiempo real.

Paso 5: Gestionar Estados Complejos

Zustand también puede manejar estados más complejos, como arrays u objetos anidados.

5.1. Manejar Arrays

Supongamos que queremos manejar una lista de tareas:

const useStore = create((set) => ({
  tareas: [],
  agregarTarea: (tarea) =>
    set((state) => ({ tareas: [...state.tareas, tarea] })),
  eliminarTarea: (id) =>
    set((state) => ({ tareas: state.tareas.filter((tarea) => tarea.id !== id) })),
}));

En este caso, tareas es un array, y las funciones agregarTarea y eliminarTarea permiten modificarlo.

5.2. Manejar Objetos Anidados

También puedes manejar objetos anidados fácilmente:

const useStore = create((set) => ({
  usuario: {
    nombre: '',
    edad: 0,
  },
  actualizarNombre: (nombre) =>
    set((state) => ({ usuario: { ...state.usuario, nombre } })),
  actualizarEdad: (edad) =>
    set((state) => ({ usuario: { ...state.usuario, edad } })),
}));

Aquí, usuario es un objeto con múltiples propiedades, y las funciones actualizarNombre y actualizarEdad permiten actualizar propiedades específicas del objeto sin modificar el resto.

Conclusión

Zustand es una excelente opción para la gestión de estado en React debido a su simplicidad, flexibilidad y rendimiento. A través de esta guía, has aprendido a configurar una tienda con Zustand, acceder y modificar el estado, usar middleware para extender la funcionalidad, y manejar estados más complejos. Con Zustand, puedes gestionar el estado global de tu aplicación de manera eficiente y sin la complejidad de otras bibliotecas. ¡Es hora de empezar a integrar Zustand en tus proyectos React!

Etiquetas:

react zustand desarrollo web javascript

Creado por:

Jorge García

Fullstack developer