Pattern per la tipizzazione degli store Zustand
Definisca store Zustand tipizzati con interfacce e azioni.
Pattern per la tipizzazione degli store Zustand è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.
Perché tipizzare Zustand
Zustand è una libreria minimale per la gestione dello stato. Con una corretta integrazione con TypeScript, ottiene letture dello store, action e selettori sicuri dal punto di vista dei tipi, senza codice ripetitivo.
import { create } from "zustand";Store tipizzato di base
Definisca l'interfaccia dello store e la passi come parametro generico 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 })),
}));Leggere lo stato dello store
Utilizzi l'hook con un selettore per leggere specifiche porzioni dello stato. TypeScript deduce il tipo restituito dal selettore.
function Counter() {
const count = useCounter((s) => s.count); // number
const increment = useCounter((s) => s.increment); // () => void
return <button onClick={increment}>{count}</button>;
}Separare stato e action
Un pattern comune separa le proprietà dello stato dai metodi action nell'interfaccia, per un'organizzazione più chiara.
interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;Action asincrone in Zustand
Zustand supporta nativamente le action asincrone: renda semplicemente asincrona la funzione action all'interno 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 });
},
}));Tipizzazione del middleware immer
Utilizzi il middleware immer di Zustand per aggiornamenti in stile mutabile. Il tipo dello store viene propagato correttamente.
import { immer } from "zustand/middleware/immer";
const useStore = create<CounterStore>()(
immer((set) => ({
count: 0,
increment: () => set((state) => { state.count++; }),
}))
);Middleware devtools
Combini devtools con una tipizzazione corretta per abilitare il supporto a Redux DevTools mantenendo intatti i tipi.
import { devtools } from "zustand/middleware";
const useStore = create<CounterStore>()(
devtools(
(set) => ({ count: 0, increment: () => set({ count: 1 }) }),
{ name: "CounterStore" }
)
);Tipizzazione dello store persistito
Il middleware persist serializza lo stato in localStorage. Lo tipizzi correttamente con l'interfaccia dello stato parziale.
import { persist } from "zustand/middleware";
const useStore = create<CounterStore>()(
persist(
(set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
{ name: "counter-storage" }
)
);Pattern delle slice tipizzate
Per gli store di grandi dimensioni, separi lo stato in slice tipizzate che vengono combinate in un'unica chiamata a create.
type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;Sottoscriversi al di fuori di React
Acceda allo stato dello store e si sottoscriva alle modifiche al di fuori dei componenti React utilizzando l'API tipizzata dello store.
// Access current state outside React
const count = useCounter.getState().count;
// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));Riepilogo: tipizzazione di Zustand
Tipizzazione di Zustand: definisca un'interfaccia dello store, la passi a create, utilizzi selettori per letture tipizzate dello stato e aggiunga middleware (immer, devtools, persist) tramite il pattern curried per propagare correttamente i tipi.
Verifica rapida
Come si legge una parte specifica dello stato Zustand in un componente evitando i re-render dovuti a modifiche non correlate?
Cosa ha imparato
Gli store Zustand vengono tipizzati passando un'interfaccia generica a create. Utilizzi funzioni selettore per letture dello stato efficienti e sicure dal punto di vista dei tipi. Combini middleware come immer, devtools e persist tramite il pattern curried di Zustand per ottenere una corretta inferenza TypeScript.
Domande Frequenti
La lezione «Pattern per la tipizzazione degli store Zustand» è gratuita?
Sì — il testo completo di «Pattern per la tipizzazione degli store Zustand» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.
Cosa imparerò in «Pattern per la tipizzazione degli store Zustand»?
Definisca store Zustand tipizzati con interfacce e azioni. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare TypeScript Academy?
Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Pattern per la tipizzazione degli store Zustand»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?
Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Tipizzazione di slice e thunk di Redux Toolkit
- Pattern per la tipizzazione degli store Zustand
- XState: macchine a stati tipizzate
- Stato derivato e selector con i tipi