0Pricing
TypeScript Academy · Lección

Patrones de tipado de stores de Zustand

Defina stores de Zustand tipados con interfaces y acciones.

Patrones de tipado de stores de Zustand es una lección gratuita de TypeScript 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 TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Por qué tipar Zustand?

Zustand es una biblioteca minimalista de gestión de estado. Con una integración adecuada con TypeScript, obtiene lecturas del store, acciones y selectores seguros para los tipos, sin código repetitivo.

import { create } from "zustand";

Store tipado básico

Defina la interfaz del store y pásela como genérico a create.

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

Leer el estado del store

Use el hook con un selector para leer partes específicas del estado. TypeScript infiere el tipo de retorno a partir del selector.

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

Separar el estado y las acciones

Un patrón habitual separa las propiedades de estado de los métodos de acción en la interfaz para organizarla con mayor claridad.

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Acciones asíncronas en Zustand

Zustand admite acciones asíncronas de forma nativa: solo tiene que hacer asíncrona la función de acción dentro del creator.

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

Tipado del middleware immer

Use el middleware immer de Zustand para realizar actualizaciones con un estilo mutable. El tipo del store se propaga correctamente.

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

Middleware devtools

Combine devtools con un tipado adecuado para habilitar la compatibilidad con Redux DevTools y mantener intactos los tipos.

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

Tipado de un store persistido

El middleware persist serializa el estado en localStorage. Típelo correctamente con la interfaz de estado parcial.

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

Patrón de slices tipados

En stores grandes, divida el estado en slices tipados que se combinen en una única llamada a create.

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

Suscribirse fuera de React

Acceda al estado del store y suscríbase a los cambios fuera de los componentes de React mediante la API tipada del store.

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

Recapitulación: tipado de Zustand

Tipado de Zustand: defina una interfaz para el store, pásela a create, use selectores para leer el estado de forma tipada y añada middleware (immer, devtools, persist) mediante el patrón currificado para que los tipos se propaguen correctamente.

Comprobación rápida

¿Cómo puede leer una parte específica del estado de Zustand en un componente sin provocar nuevos renders por cambios no relacionados?

Lo que ha aprendido

Los stores de Zustand se tipan pasando un genérico de interfaz a create. Use funciones selectoras para leer el estado de forma eficiente y segura para los tipos. Combine middleware como immer, devtools y persist mediante el patrón currificado de Zustand para obtener una inferencia correcta de TypeScript.

Preguntas frecuentes

¿La lección «Patrones de tipado de stores de Zustand» es gratis?

Sí — el texto completo de «Patrones de tipado de stores de Zustand» 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 TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Patrones de tipado de stores de Zustand»?

Defina stores de Zustand tipados con interfaces y acciones. Practicas TypeScript 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 TypeScript Academy?

No se requiere experiencia previa. TypeScript 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 «Patrones de tipado de stores de Zustand»?

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 TypeScript Academy?

Sí. Cada lección de TypeScript 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

  1. Tipado de slices y thunks de Redux Toolkit
  2. Patrones de tipado de stores de Zustand
  3. XState: máquinas de estados tipadas
  4. Estado derivado y selectores con tipos
← Volver a TypeScript Academy