skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

zustand-store-ts

Creates TypeScript Zustand stores with subscribeWithSelector middleware and separated state and actions.

1|Updated Aug 17, 2025
Search Tags:#typescript#state management#store#react#zustand#selectors#subscribewithselector
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill zustand-store-ts-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zustand-store-ts
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/zustand-store-ts
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill zustand-store-ts-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zustand, and includes assets (resource) components.

What problem does it solve? Setting up Zustand stores in TypeScript often leads to inconsistent patterns, unnecessary re-renders from whole-store subscriptions, and tangled state/action definitions. This Skill enforces a proven structure so your React global state is typed, performant, and maintainable from the start. ## Core Features & Use Cases - Typed Store Scaffolding: Generates stores with separate State and Actions interfaces combined into a single store type. - subscribeWithSelector Middleware: Ensures every store supports fine-grained subscriptions, including subscriptions outside React components. - Selector Best Practices: Promotes individual selectors to prevent re-renders on unrelated state changes. - Use Case: You are building a project dashboard and need a global store for items, loading state, and async actions. Use this Skill to scaffold the store, export it from the store index, and add matching tests. ## Quick Start Ask the AI to create a new Zustand store named Project with items and loading state using the zustand-store-ts patterns.

Frequently Asked Questions about zustand-store-ts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Zustand store with TypeScript?▼

Define separate State and Actions interfaces, combine them into a store type, and pass it to create with the subscribeWithSelector middleware. This gives full type inference for state, actions, and selectors.

How to subscribe to Zustand state outside React components?▼

Use store.subscribe with a selector function, enabled by the subscribeWithSelector middleware. Pass a selector like state => state.selectedId and a callback that runs whenever that slice changes.

Why does my Zustand component re-render on every state change?▼

Destructuring the whole store with useStore() subscribes to all state changes. Use individual selectors like useStore(state => state.items) so components only re-render when their selected slice updates.

Should I separate state and actions in Zustand?▼

Yes, defining separate State and Actions interfaces keeps the store contract clear and improves type safety. Combining them into one store type still gives a single hook for consumers.

When should I use Zustand instead of React Context?▼

Zustand fits global or frequently updated state where Context would cause excessive re-renders. It supports selector-based subscriptions and subscriptions outside React, which Context cannot do natively.

Related Skills

Explore More Software Engineering Skills→
ratnesh-mauryaratnesh-maurya
1

zustand-store-ts

Creates TypeScript Zustand stores with subscribeWithSelector middleware and separated state and actions.

Community
Basic
githubgithub
38.5k

unit-test-vue-pinia

Write and review unit tests for Vue 3, Vitest, and Pinia codebases.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

zustand-middleware

Compose Zustand middleware for persistence, DevTools, and Immer updates.

Official
Advanced
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced