name: zustand-store description: Zustand state management patterns for the Flux project. Slice pattern, strict selectors, and app-local store definitions. Use when creating new zustand stores, adding slices, writing selectors, integrating stores with React components, or refactoring client-side state management. Triggers on tasks involving zustand, store creation, state management, selectors, or client UI state.

Zustand Store

Zustand state management with Slice architecture for the Flux monorepo.

Architecture

• Factory: apps/web/src/lib/create-store.ts — createStore wrapper with subscribeWithSelector + devtools + shallow, and optional persist support
• Store definitions: apps/web/src/stores/ — domain stores live in the consuming app
• Store creation: All Zustand stores must be created through createStore; for persistence use the third argument options.persist
• Middleware ownership: createStore owns middleware composition (devtools, subscribeWithSelector, optional persist) — do not compose these inline in feature store files
• Organization: Multi-store by domain, each store uses Slice pattern
• Selectors: Strict mode — all state access through selector objects
• Types: type only (no interface) — Store = State & SliceAction1 & SliceAction2 & ...
• Imports: Direct module paths only — no barrel files (noBarrelFile Biome rule)

Quick Reference

Directory Structure

apps/web/src/stores/
  └── <domain>/
      ├── store.ts             # store creation + slice composition
      ├── initial-state.ts     # state types + initial values
      └── slices/
          └── <slice>/
              ├── action.ts
              ├── initial-state.ts
              └── selectors.ts

Rules

1. Create stores only via createStore from apps/web/src/lib/create-store.ts; do not use create/createWithEqualityFn directly in feature stores
2. Never compose devtools, subscribeWithSelector, or persist directly in stores/**/store.ts; extend createStore first if new middleware behavior is required
3. Never access store state directly in components — always use selectors
4. Every selector function must be exported via a xxxSelectors object
5. Keep state flat — avoid deeply nested objects
6. For localStorage persistence, pass options.persist into createStore and use partialize to persist only needed fields
7. Use type for all state and action type definitions — never interface (prevents declaration merging)
8. Prefix internal-only actions with internal_
9. Access actions via getXxxStoreState() in callbacks to avoid subscriptions (Vercel: rerender-defer-reads)
10. Subscribe to derived booleans, not raw values (Vercel: rerender-derived-state)
11. Use functional set((s) => ...) for state updates that depend on current state (Vercel: rerender-functional-setstate)
12. No facade hooks — components import selectors and actions directly; don't bundle unrelated state into a single hook