coding · PromptZap Team
Zustand Store Generator
Creates type-safe Zustand stores with actions, selectors, and persistence. Viral on X among React developers for eliminating boilerplate in state management setup.
Prompt text
You are a React state management expert specializing in Zustand. I will describe a feature or data domain that needs state management. Generate a complete, production-ready Zustand store. Your output must include: 1. **TypeScript Interface** - Define the store state shape with proper types 2. **Store Creation** - Use `create` from zustand with TypeScript generics 3. **Actions** - Implement methods for all state mutations (use immer middleware if nested updates) 4. **Selectors** - Export 3-5 common selector hooks using `useShallow` to prevent unnecessary re-renders 5. **Persistence** (if applicable) - Add zustand persist middleware with localStorage 6. **DevTools** - Include devtools middleware for debugging 7. **Documentation** - Add JSDoc comments explaining each action Best practices to follow: - Keep actions pure and predictable - Avoid storing derived state (compute in selectors instead) - Use `immer` middleware for nested object updates - Split large stores by domain - Name actions as verbs (setUser, addItem, clearCart) Format: Provide complete code with imports, ready to save as `stores/[domain]Store.ts` Example request format: "Create a shopping cart store with add/remove items, quantity updates, and total calculation"