kaxuna1/zustand

Zustand Skill

Lightweight state management that replaces verbose Context + useReducer patterns with minimal boilerplate. Zustand stores are plain objects with actions - no providers, reducers, or action types needed.

WARNING: Missing Professional State Management

Detected: No zustand in frontend/package.json - currently using React Context Impact: Verbose boilerplate, provider hell, can't access state outside React

Install

cd frontend && npm install zustand

Quick Start

Basic Store

// src/stores/cartStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import type { Product, ProductVariant, PromoCode } from '../types/product';

interface CartItem {
  product: Product;
  variant?: ProductVariant;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  promoCode: PromoCode | null;
  discount: number;
  addItem: (product: Product, quantity?: number, variant?: ProductVariant) => void;
  removeItem: (productId: number, variantId?: number) => void;
  updateQuantity: (productId: number, quantity: number, variantId?: number) => void;
  applyPromoCode: (promoCode: PromoCode, discount: number) => void;
  clear: () => void;
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],
      promoCode: null,
      discount: 0,

      addItem: (product, quantity = 1, variant) => set((state) => {
        const existing = state.items.find(
          (item) => item.product.id === product.id && item.variant?.id === variant?.id
        );
        if (existing) {
          return {
            items: state.items.map((item) =>
              item.product.id === product.id && item.variant?.id === variant?.id
                ? { ...item, quantity: item.quantity + quantity }
                : item
            ),
          };
        }
        return { items: [...state.items, { product, variant, quantity }] };
      }),

      removeItem: (productId, variantId) => set((state) => ({
        items: state.items.filter(
          (item) => !(item.product.id === productId && item.variant?.id === variantId)
        ),
      })),

      updateQuantity: (productId, quantity, variantId) => set((state) => ({
        items: state.items.map((item) =>
          item.product.id === productId && item.variant?.id === variantId
            ? { ...item, quantity: Math.max(quantity, 1) }
            : item
        ),
      })),

      applyPromoCode: (promoCode, discount) => set({ promoCode, discount }),

      clear: () => set({ items: [], promoCode: null, discount: 0 }),
    }),
    { name: 'luxia-cart' }
  )
);

Using in Components

// Direct selector - only re-renders when items change
const items = useCartStore((state) => state.items);
const addItem = useCartStore((state) => state.addItem);

// Multiple selectors with shallow equality
import { useShallow } from 'zustand/react/shallow';
const { items, total } = useCartStore(
  useShallow((state) => ({ items: state.items, total: state.total }))
);

Key Concepts

| Concept | Usage | Example | |---------|-------|---------| | Store creation | create<Type>()((set, get) => ({})) | State + actions in one object | | Selectors | useStore(state => state.field) | Prevents unnecessary re-renders | | Persistence | persist(store, { name: 'key' }) | Auto localStorage sync | | Outside React | useStore.getState() | Access in API clients, utils | | Computed values | Derive in selector or store | get().items.reduce(...) |

Common Patterns

Computed Values (Derived State)

// Option 1: Compute in selector (recommended for simple derivations)
const subtotal = useCartStore((state) =>
  state.items.reduce((sum, item) => {
    const price = item.variant?.price ?? item.product.price;
    return sum + price * item.quantity;
  }, 0)
);

// Option 2: Add getter to store (for complex/reused derivations)
export const useCartStore = create<CartState>()((set, get) => ({
  items: [],
  getSubtotal: () => get().items.reduce((sum, item) => {
    const price = item.variant?.price ?? item.product.price;
    return sum + price * item.quantity;
  }, 0),
}));

Access Outside React

// src/api/client.ts - Attach auth token to requests
import { useAuthStore } from '../stores/authStore';

export const apiClient = axios.create({ baseURL: '/api' });

apiClient.interceptors.request.use((config) => {
  const token = useAuthStore.getState().token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

See Also

• patterns
• workflows

Related Skills

For server state (API data), see the tanstack-query skill - NEVER use Zustand for server state. For form state, see the react-hook-form skill. For component patterns, see the react skill. For type definitions, see the typescript skill.