Middleware DevTools

Redux DevTools Extension

Il middleware devtools connette il tuo store Zustand alla Redux DevTools Extension del browser. Questo permette di visualizzare lo stato, le azioni e la loro cronologia in tempo reale.

Installare l’Estensione

Installa l’estensione Redux DevTools dal Chrome Web Store (disponibile anche per Firefox e Edge).

Configurazione Base

import { create } from 'zustand'
import { devtools } from 'zustand/middleware'

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

const useCounterStore = create<CounterState>()(
  devtools((set) => ({
    count: 0,
    increment: () => set(
      (state) => ({ count: state.count + 1 }),
      undefined,
      'counter/increment' // nome dell'azione nei DevTools
    ),
    decrement: () => set(
      (state) => ({ count: state.count - 1 }),
      undefined,
      'counter/decrement'
    ),
  }))
)

Il terzo argomento di set e’ il nome dell’azione che appare nei DevTools. Il secondo argomento (undefined) e’ il flag replace (false di default).

Action Names

Nominare le azioni e’ fondamentale per il debugging. Senza nomi, nei DevTools vedrai solo “anonymous”.

// Pattern consigliato: namespace/azione
set(newState, false, 'auth/login')
set(newState, false, 'cart/addItem')
set(newState, false, 'cart/removeItem')
set(newState, false, 'ui/toggleSidebar')

Opzioni del Middleware

const useStore = create<MyState>()(
  devtools(
    (set) => ({
      // ... stato e azioni
    }),
    {
      name: 'MyApp Store',       // nome dello store nei DevTools
      enabled: true,             // abilita/disabilita
      anonymousActionType: 'unknown', // nome per azioni senza etichetta
      store: 'counter',         // identificatore per multi-store
    }
  )
)

Abilitare Solo in Sviluppo

In produzione i DevTools non dovrebbero essere attivi. Usa la variabile d’ambiente per controllarlo.

const useStore = create<MyState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set(
        (s) => ({ count: s.count + 1 }),
        false,
        'increment'
      ),
    }),
    {
      name: 'App Store',
      enabled: process.env.NODE_ENV === 'development',
    }
  )
)

Combinare con Altri Middleware

devtools deve essere il middleware piu’ esterno per intercettare tutte le azioni.

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

const useStore = create<StoreState>()(
  devtools(
    persist(
      immer((set) => ({
        items: [],
        addItem: (item) =>
          set(
            (state) => { state.items.push(item) },
            false,
            'items/add'
          ),
      })),
      { name: 'items-storage' }
    ),
    { name: 'Items Store', enabled: process.env.NODE_ENV === 'development' }
  )
)

Trace (Stack Trace)

Puoi abilitare lo stack trace per ogni azione per risalire a dove nel codice e’ stata chiamata.

devtools(
  (set) => ({ /* ... */ }),
  {
    name: 'Debug Store',
    trace: true,        // abilita lo stack trace
    traceLimit: 25,     // numero massimo di frame nello stack
  }
)

Attenzione: il trace ha un impatto sulle performance. Usalo solo durante il debugging attivo, non come impostazione permanente.

Multi-Store nei DevTools

Quando hai piu’ store, usa l’opzione store per distinguerli nel pannello DevTools.

const useAuthStore = create<AuthState>()(
  devtools(fn, { name: 'App', store: 'auth' })
)

const useCartStore = create<CartState>()(
  devtools(fn, { name: 'App', store: 'cart' })
)

Ogni store apparira’ con il proprio identificatore, rendendo facile filtrare le azioni per dominio.