Labsco
microsoft logo

zustand-store-ts

✓ Official★ 2,700

by microsoft · part of microsoft/skills

Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating…

🔥🔥🔥🔥✓ VerifiedFreeQuick setup
#cloud#git
🧩 One of 7 skills in the microsoft/skills package — works on its own, and pairs well with its siblings.

Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by microsoft

Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating… npx skills add https://github.com/microsoft/agent-skills --skill zustand-store-ts Download ZIPGitHub2.7k

Zustand Store

Create Zustand stores following established patterns with proper TypeScript types and middleware.

Always Use subscribeWithSelector

Copy & paste — that's it
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

export const useMyStore = create ()(
 subscribeWithSelector((set, get) => ({
 // state and actions
 }))
);

Separate State and Actions

Copy & paste — that's it
export interface MyState {
 items: Item[];
 isLoading: boolean;
}

export interface MyActions {
 addItem: (item: Item) => void;
 loadItems: () => Promise ;
}

export type MyStore = MyState & MyActions;

Use Individual Selectors

Copy & paste — that's it
// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);

// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();

Subscribe Outside React

Copy & paste — that's it
useMyStore.subscribe(
 (state) => state.selectedId,
 (selectedId) => console.log('Selected:', selectedId)
);

Integration Steps

  • Create store in src/frontend/src/store/

  • Export from src/frontend/src/store/index.ts

  • Add tests in src/frontend/src/store/*.test.ts