Zustand State Management

关于

This skill equips Claude with the expertise to architect, implement, and debug Zustand state stores within React ecosystems. It focuses on modern TypeScript standards, such as the curried double-parentheses pattern, and provides robust solutions for complex scenarios including persistent storage, Redux DevTools integration, and the slices pattern. Crucially, it includes specialized logic to prevent common production hurdles like Next.js hydration mismatches, infinite render loops caused by unstable selectors, and TypeScript inference failures in middleware-heavy environments.

主要功能

• Persistent state implementation with localStorage and hydration handling
• Seamless Next.js SSR and Redux DevTools integration
• Type-safe store creation using the create<T>()() pattern
• Optimized selector patterns to prevent unnecessary re-renders
• 91 GitHub stars
• Advanced store modularization using the slices pattern

使用场景

• Implementing persistent user settings and local carts in Next.js applications
• Debugging and fixing React hydration errors and infinite render loops
• Migrating complex React applications from Redux or Context API to Zustand