Installazione

Zustand supporta tutti i principali package manager. Scegli quello che usi nel tuo progetto.

# npm
npm install zustand

# yarn
yarn add zustand

# pnpm
pnpm add zustand

Requisiti

React 18+ (usa useSyncExternalStore internamente)
TypeScript 4.5+ (consigliato ma non obbligatorio)

Primo Store

Crea un file dedicato per il tuo store, ad esempio src/stores/counterStore.ts.

import { create } from 'zustand'

interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
  reset: () => void
}

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

Usare lo Store in un Componente

Lo store creato con create restituisce un hook React. Basta importarlo e usarlo con un selettore.

import { useCounterStore } from '@/stores/counterStore'

function Counter() {
  const count = useCounterStore((state) => state.count)
  const increment = useCounterStore((state) => state.increment)
  const decrement = useCounterStore((state) => state.decrement)

  return (
    <div>
      <h2>Contatore: {count}</h2>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

Nessun Provider Necessario

A differenza di Redux o Context API, Zustand non richiede alcun Provider che avvolga l’applicazione. Lo store vive fuori dall’albero React ed è accessibile da qualsiasi componente senza wrapping.

// NON serve questo:
// <StoreProvider>
//   <App />
// </StoreProvider>

// Basta importare e usare:
function App() {
  return (
    <div>
      <Counter />
      <ResetButton />
    </div>
  )
}

function ResetButton() {
  const reset = useCounterStore((state) => state.reset)
  return <button onClick={reset}>Reset</button>
}

Accesso Fuori dai Componenti

Lo store espone metodi utilizzabili anche al di fuori di React (ad esempio in funzioni utility, middleware, event handler globali).

// Leggere lo stato corrente
const currentCount = useCounterStore.getState().count

// Aggiornare lo stato
useCounterStore.setState({ count: 10 })

// Sottoscriversi ai cambiamenti
const unsub = useCounterStore.subscribe((state) => {
  console.log('Nuovo conteggio:', state.count)
})

// Annullare la sottoscrizione
unsub()

Struttura Consigliata

src/
  stores/
    counterStore.ts
    authStore.ts
    cartStore.ts
  components/
    Counter.tsx

Ogni store in un file separato, importato dove serve. Nessuna configurazione globale, nessun provider, nessun boilerplate.