React Academy · Lezione

Creazione del primo store Zustand

Definisca uno store con create(), aggiunga slice di stato e action e lo utilizzi con useStore.

Creazione del primo store Zustand è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuti

In questa lezione creerà il suo primo store Zustand con create(), definirà slice di stato e azioni e utilizzerà lo store nei componenti React.

Che cos'è Zustand?

Zustand è una libreria minimale e non prescrittiva per la gestione dello stato. Uno store è un semplice oggetto JavaScript con stato e funzioni. I componenti vi si iscrivono tramite un hook. Nessun provider, nessun reducer e niente boilerplate.

Installazione

Installi Zustand. Non ha dipendenze peer.

npm install zustand

Creazione di uno store

Chiami create() con una funzione che restituisce lo stato iniziale e le azioni. La funzione riceve un helper `set` per aggiornare lo stato.

import { create } from 'zustand';

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

Utilizzo dello store in un componente

Chiami l'hook dello store in qualsiasi componente per accedere allo stato e alle azioni. Non è necessario alcun Provider wrapper.

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Sintassi dei selettori

Passi una funzione selettore all'hook dello store per iscriversi solo alla slice di cui ha bisogno. Il componente esegue nuovamente il rendering solo quando cambia il valore selezionato.

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Aggiornamento dello stato con set

La funzione `set` unisce superficialmente i nuovi valori allo store. Può passare un oggetto oppure una funzione che riceve lo stato corrente e restituisce aggiornamenti parziali.

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Azioni asincrone

Le azioni possono essere asincrone. Chiami set dopo aver atteso i dati. Non è necessario alcun middleware: scriva semplicemente normali funzioni asincrone.

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Aggiornamento dello stato annidato

Per gli oggetti annidati, utilizzi manualmente lo spread del livello esterno oppure il middleware immer per le mutazioni profonde. Per impostazione predefinita, set unisce solo le chiavi di primo livello.

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Lettura dello store fuori da React

Acceda allo stato dello store fuori da un componente con getState() e si iscriva alle modifiche con subscribe(). È utile per i test e per il codice non React.

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Verifica rapida

In uno store Zustand, che cosa fa la funzione set?

Riepilogo

Crei uno store Zustand con create((set) => ({ state, actions })). Utilizzi la sintassi dei selettori nei componenti per iscriversi alle slice. Le azioni chiamano set() per aggiornare lo stato. Funziona in modo asincrono e fuori da React con getState().

Prossima lezione

Prossima lezione: **Selettori e prevenzione dei rendering non necessari** — estrarrà specifiche slice di stato, così i componenti verranno renderizzati nuovamente solo quando necessario.

Domande Frequenti

La lezione «Creazione del primo store Zustand» è gratuita?

Sì — il testo completo di «Creazione del primo 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Creazione del primo store Zustand»?

Definisca uno store con create(), aggiunga slice di stato e action e lo utilizzi con useStore. Eserciti React 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 React Academy?

Non è richiesta alcuna esperienza precedente. React 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 1 di 4.

Quanto tempo richiede la lezione «Creazione del primo 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 React Academy?

Sì. Ogni lezione React 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

Creazione del primo store Zustand
Selector e prevenzione dei re-render non necessari
Persistenza dello stato con il middleware persist
DevTools di Zustand e test degli store

← Torna a React Academy