Stato globale con Zustand
Integri Zustand, una libreria leggera per la gestione dello stato, come soluzione potente e flessibile per lo stato globale.
Stato globale con Zustand è una lezione Next.js 15 Fullstack (App Router + Server Actions) 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 Next.js 15 Fullstack (App Router + Server Actions), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Conoscere Zustand per lo stato globale
Benvenuto in Zustand! È una soluzione piccola, veloce e scalabile per la gestione dello stato nelle applicazioni React e Next.js.
A differenza di altre librerie, Zustand è noto per la sua semplicità e per il boilerplate minimo, che lo rendono facile da imparare e usare.
- Semplice: usa una API semplice basata sugli hook di React.
- Veloce: è ottimizzato per le prestazioni ed evita nuovi rendering non necessari.
- Scalabile: funziona bene sia nelle app piccole sia nei progetti grandi e complessi.
Perché lo stato globale è importante
Nelle applicazioni più grandi, spesso è necessario condividere dati tra molti componenti che non sono collegati direttamente (ad esempio lo stato di accesso di un utente o gli articoli nel carrello).
Senza uno stato globale, potrebbe essere necessario ricorrere al "prop drilling", cioè passare le props attraverso molti livelli di componenti, con un codice disordinato e difficile da mantenere.
Le librerie per lo stato globale come Zustand risolvono il problema offrendo un punto centrale in cui memorizzare e gestire i dati accessibili da qualsiasi componente.
Installare Zustand nel progetto
Iniziare a usare Zustand è semplice. È sufficiente installarlo usando il package manager preferito.
Apra il terminale nella directory del progetto Next.js ed esegua uno dei seguenti comandi:
- npm:
npm install zustand - yarn:
yarn add zustand - pnpm:
pnpm add zustand
Al termine dell'installazione, sarà pronto per creare il primo store!
Creare il primo store Zustand
Uno store Zustand viene creato usando la funzione create. Questa funzione riceve un callback che definisce lo stato iniziale e le eventuali funzioni (azioni) per modificarlo.
L'argomento set del callback serve ad aggiornare lo stato dello store. Definiamo un semplice store per un contatore:
import { create } from 'zustand';
import React from 'react';
// Define your store
const useCounterStore = create((set) => ({
count: 0, // Initial state
}));
// A dummy component to make it runnable
function StoreDefined() {
return <p>Zustand store created!</p>;
}
export default function App() {
return <StoreDefined />;
}Accedere allo stato dello store in React
Ora che disponiamo di uno store, impariamo a leggerne lo stato all'interno di un componente React. Zustand fornisce un hook (generato dal vostro store) che potete chiamare direttamente.
È anche possibile usare una funzione "selector" per selezionare solo le parti specifiche dello stato necessarie, evitando nuovi rendering non necessari.
import { create } from 'zustand';
import React from 'react';
const useCounterStore = create((set) => ({
count: 0,
}));
// This component reads the 'count' from the store
function CountDisplay() {
const count = useCounterStore((state) => state.count);
return (
<div>
<h3>Current Count:</h3>
<p>{count}</p>
</div>
);
}
export default function App() {
return <CountDisplay />;
}Azioni per modificare lo stato dello store
Gli store non servono solo a leggere i dati: definiscono anche le azioni che possono modificare lo stato. Queste azioni sono funzioni all'interno della chiamata a create che usano l'argomento set.
Aggiungiamo le azioni increment e decrement al nostro store del contatore e usiamole con alcuni pulsanti in un componente:
import { create } from 'zustand';
import React from 'react';
const useCounterStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));
function CounterApp() {
// Select both state and actions
const { count, increment, decrement } = useCounterStore();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default function App() {
return <CounterApp />;
}Ottimizzare con i selettori dello stato
Se lo store contiene molti valori, un componente che usa solo una piccola parte dello stato potrebbe comunque essere nuovamente renderizzato quando cambiano altre parti non correlate dello stato.
Il pattern dei selettori di Zustand aiuta a evitare questo problema. Fornendo una funzione selector a useStore, il componente verrà nuovamente renderizzato solo se cambia la parte *selezionata* dello stato.
import { create } from 'zustand';
import React from 'react';
const useUserProfileStore = create((set) => ({
username: "Coddy",
email: "coddy@example.com",
loggedIn: true,
updateUsername: (name) => set({ username: name }),
}));
// This component only cares about the username
function UsernameDisplay() {
// Select only 'username' for efficient rendering
const username = useUserProfileStore((state) => state.username);
return (
<div>
<p>Hello, {username}!</p>
</div>
);
}
export default function App() {
return <UsernameDisplay />;
}Gestire gli aggiornamenti asincroni
Le azioni di Zustand possono gestire facilmente le operazioni asincrone, come il recupero di dati da una API. È sufficiente eseguire la logica asincrona all'interno dell'azione e chiamare quindi set quando i dati sono pronti.
Questo consente di gestire gli stati di caricamento o aggiornare i dati al termine delle richieste di rete. Ecco un esempio che simula un aggiornamento ritardato:
import { create } from 'zustand';
import React from 'react';
const useLoadingStore = create((set) => ({
isLoading: false,
message: "",
fetchData: async () => {
set({ isLoading: true, message: "Loading..." });
// Simulate an API call
await new Promise((resolve) => setTimeout(resolve, 1500));
set({ isLoading: false, message: "Data Loaded!" });
},
}));
function DataFetcher() {
const { isLoading, message, fetchData } = useLoadingStore();
return (
<div>
<p>{message}</p>
<button onClick={fetchData} disabled={isLoading}>
{isLoading ? "Fetching..." : "Fetch Data"}
</button>
</div>
);
}
export default function App() {
return <DataFetcher />;
}Strutturare gli store Zustand
Nelle applicazioni Next.js più grandi, è buona pratica organizzare gli store Zustand. Invece di definire tutti gli store in un unico file, create un file dedicato per ogni store (ad esempio stores/userStore.js, stores/cartStore.js).
In questo modo la codebase rimane ordinata, modulare e più facile da esplorare. Potrete quindi importare e usare gli hook degli store dove necessario.
Verificare le proprie competenze su Zustand
Consideri la seguente definizione di uno store Zustand:
import { create } from 'zustand';
const useSettingsStore = create((set) => ({
theme: 'light',
fontSize: 16,
toggleTheme: () => set((state) => ({
theme: state.theme === 'light' ? 'dark' : 'light',
})),
setFontSize: (size) => set({ fontSize: size }),
}));
Se chiama useSettingsStore((state) => state.theme) in un componente, quale sarà il suo valore iniziale?
Zustand: breve riepilogo
Ottimo lavoro! Ha esplorato Zustand, una libreria potente e leggera per la gestione dello stato globale in Next.js.
Ha imparato a:
- Creare un semplice store Zustand.
- Leggere lo stato e inviare azioni nei componenti.
- Ottimizzare le prestazioni usando i selettori.
- Gestire gli aggiornamenti asincroni.
La semplicità e la flessibilità di Zustand lo rendono una scelta eccellente per gestire lo stato globale lato client nelle applicazioni. Continui a esercitarsi per padroneggiarlo!
Impara TypeScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «Stato globale con Zustand» è gratuita?
Sì — il testo completo di «Stato globale con 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 Next.js 15 Fullstack (App Router + Server Actions), passa a CoddyKit PRO. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Cosa imparerò in «Stato globale con Zustand»?
Integri Zustand, una libreria leggera per la gestione dello stato, come soluzione potente e flessibile per lo stato globale. Eserciti Next.js 15 Fullstack (App Router + Server Actions) 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 Next.js 15 Fullstack (App Router + Server Actions)?
Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack (App Router + Server Actions) 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 «Stato globale con 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 Next.js 15 Fullstack (App Router + Server Actions)?
Sì. Ogni lezione Next.js 15 Fullstack (App Router + Server Actions) 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
- React Context API
- Stato globale con Zustand
- Gestire lo stato del server
- Persistenza dello stato in localStorage