Generate Robust Zustand Stores for React Apps

This skill builds type-safe, performant Zustand stores for React state management, following five core principles: a single source of truth per domain, immutable updates via the Immer middleware or manual patterns, full TypeScript inference, performance tuned through selector design and state structure, and modular, composable, testable stores. A basic store is created with create<State>() wrapped in the immer middleware, letting actions write mutative-looking code (state.todos.push(...)) that Immer converts into immutable updates under the hood.

Use it when building application state that needs typed actions, computed selectors, and controlled re-renders - not local component state that never needs to be shared. It is not meant to store derived values: computing filtered lists or stats from a selector at read time, rather than storing them redundantly in the store, is the pattern the skill itself follows and one of its named anti-patterns to avoid violating.

Given application state requirements, it produces reusable selectors defined outside the store (a filter-switching selector and a stats-aggregating selector, both composed cleanly in components), sliced and composed stores (independent UserSlice and NotificationSlice interfaces merged into one AppState type, with cross-slice actions - a login action that calls get().addNotification(...) to trigger a success or error notification from within the user slice), persisted stores (the persist middleware backed by localStorage via createJSONStorage, with partialize selecting exactly which state fields survive a reload), and a testable store factory pattern that accepts partial initial state for dependency injection in tests.

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

const useSettingsStore = create<SettingsState>()((
  persist(
    immer((set) => ({
      theme: 'light',
      language: 'en',
      notifications: {
        email: true,
        push: true,
        desktop: false
      },
      updateTheme: (theme) => set((state) => {
        state.theme = theme
      }),
      updateNotificationSettings: (settings) => set((state) => {
        Object.assign(state.notifications, settings)
      })
    })),
    {
      name: 'app-settings',
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => ({
        theme: state.theme,
        language: state.language,
        notifications: state.notifications
      })
    }
  )
))

Performance-sensitive reads subscribe to a narrow slice of state directly (state.todos.length) rather than the whole object, or use shallow comparison when selecting an object of multiple fields together to avoid unnecessary re-renders. Debugging wires in devtools around persist and immer, with tracing and serialization options exposed to the Redux DevTools extension.

React developers building shared application state who need the full pattern set - typed stores, Immer-based immutability, reusable selectors, slice composition, strategic persistence, and testable store factories - while explicitly avoiding named anti-patterns: storing derived state instead of computing it, building one monolithic store, mutating state directly without Immer, over-subscribing to the whole store, and mixing UI state with business logic.