Zustand para el estado ligero de React
Cree un almacén de Zustand con create(), lea el estado con el hook, actualícelo con acciones y disfrute de una API mínima sin código repetitivo.
Zustand para el estado ligero de React es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es Zustand?
Zustand es una biblioteca minimalista y rápida de gestión de estado para React. Toda su API es muy pequeña: cree un store y use un hook para leerlo y actualizarlo. No hay reducers, acciones ni código repetitivo.
Crear un store
create() define el store con el estado y las acciones como un objeto simple. El valor devuelto es un hook.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));Leer el estado del store
Llame al hook con una función selector para suscribirse a partes específicas del estado. El componente solo se vuelve a renderizar cuando cambia la parte seleccionada.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Leer acciones
Seleccione las acciones de la misma forma. Las acciones no cambian, por lo que seleccionarlas no provoca renderizados adicionales.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Actualizar el estado con set()
La función set() combina las actualizaciones superficialmente (como setState en los componentes de clase de React). Pase una función para las actualizaciones que dependan del estado anterior.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Acciones asíncronas
Las acciones de Zustand pueden ser asíncronas: solo tiene que llamar a set() después de esperar a que termine la operación asíncrona.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Slices — Componer stores grandes
Divida un store grande en slices (objetos separados) y combínelos. El patrón de Zustand no requiere la abstracción de slices, pero es una forma limpia de organizar stores grandes.
Middleware: persist
El middleware persist guarda el estado de Zustand en localStorage y lo rehidrata al cargar, con una configuración mínima.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Middleware: devtools
Añada compatibilidad con Redux DevTools a Zustand mediante el middleware devtools. Obtendrá un registro completo de acciones y la posibilidad de viajar en el tiempo.
Zustand frente a Redux Toolkit
Zustand: minimalista, sin código repetitivo, rápido de configurar y excelente para aplicaciones pequeñas o medianas. RTK: estructurado, escalable, con DevTools de primer nivel y más adecuado para equipos grandes. Ambas son opciones sólidas; la simplicidad de Zustand es la mejor opción para la mayoría de las aplicaciones.
Selectores y rendimiento
Seleccione siempre la parte mínima del estado que necesite el componente. Seleccionar el objeto de estado completo provoca renderizados cada vez que cambia el store. Use shallow de zustand/shallow para seleccionar varias propiedades.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Comprobación rápida
¿Cómo se crea un store de Zustand que pueda usar toda una aplicación de React?
Resumen: Zustand
create() define el estado y las acciones. El valor devuelto es un hook. Seleccione partes del estado para evitar renderizados innecesarios. set() combina las actualizaciones del estado. Las acciones asíncronas llaman a set() después de await. Use el middleware persist para localStorage y devtools para la integración con Redux DevTools. No se necesita Provider.
Preguntas frecuentes
¿La lección «Zustand para el estado ligero de React» es gratis?
Sí — el texto completo de «Zustand para el estado ligero de React» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Zustand para el estado ligero de React»?
Cree un almacén de Zustand con create(), lea el estado con el hook, actualícelo con acciones y disfrute de una API mínima sin código repetitivo. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Zustand para el estado ligero de React»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Redux Toolkit: createSlice y configureStore
- Zustand para el estado ligero de React
- Pinia para Vue: defineStore y storeToRefs
- Cuándo usar estado global o local