Zustand State Management

Basic Store

import { create } from 'zustand'

// Define store with TypeScript
interface BearStore {
  bears: number
  addBear: () => void
  removeAllBears: () => void
}

const useBearStore = create<BearStore>((set, get) => ({
  bears: 0,
  addBear: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  // Access other state via get()
  doubleBears: () => get().bears * 2,
}))

// Usage in component
function BearCounter() {
  const bears = useBearStore(state => state.bears) // selective subscribe
  const addBear = useBearStore(state => state.addBear)
  return <button onClick={addBear}>Bears: {bears}</button>
}

Persistence Middleware

import { persist, createJSONStorage } from 'zustand/middleware'

const useStore = create(
  persist(
    (set) => ({
      token: null,
      setToken: (token) => set({ token }),
    }),
    {
      name: 'auth-storage',          // localStorage key
      storage: createJSONStorage(() => sessionStorage), // or localStorage
      partialize: (state) => ({ token: state.token }), // only persist token
    }
  )
)

Zustand vs Redux