집

Skill

웹 개발

zustand-store-ts

microsoft/skills

React 상태 관리를 위해 TypeScript, subscribeWithSelector 미들웨어, 그리고 적절한 상태/액션 분리와 함께 Zustand 스토어를 생성하세요.

...모든 것을 확장하십시오

업데이트 된 시간 2026년 9월 13일

# typescript # react # middleware # state management # zustand

Zustad 스토어

확립된 패턴을 따르고 적절한 TypeScript 타입과 미들웨어를 사용하여 Zustand 스토어를 생성합니다.

빠른 시작

assets/template.ts에서 템플릿을 복사하고 자리 표시자를 바꿉니다:

{{StoreName}} → PascalCase 스토어 이름 (예: Project)
{{description}} → JSDoc용 간략한 설명

Always Use subscribeWithSelector

import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

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

State와 Actions 분리

export interface MyState {
  items: Item[];
  isLoading: boolean;
}

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

export type MyStore = MyState & MyActions;
</void>

개별 선택자 사용

// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);

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

React 외부 구독

useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);

통합 단계

src/frontend/src/store/에 스토어 생성
src/frontend/src/store/index.ts에서 내보내기
src/frontend/src/store/*.test.ts에 테스트 추가

GitHub에서 보기

---
name: zustand-store-ts
description: Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation for React state management.
license: MIT
---

# Zustand Store

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

## Quick Start

Copy the template from [assets/template.ts](assets/template.ts) and replace placeholders:
- `{{StoreName}}` → PascalCase store name (e.g., `Project`)
- `{{description}}` → Brief description for JSDoc

## Always Use subscribeWithSelector

```typescript
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

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

## Separate State and Actions

```typescript
export interface MyState {
  items: Item[];
  isLoading: boolean;
}

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

export type MyStore = MyState & MyActions;
```

## Use Individual Selectors

```typescript
// 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

```typescript
useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);
```

## Integration Steps

1. Create store in `src/frontend/src/store/`
2. Export from `src/frontend/src/store/index.ts`
3. Add tests in `src/frontend/src/store/*.test.ts`

모든 파일

0개 파일

zustand-store-ts 설치

스킬 파일을 다운로드하여 .claude/skills/ 디렉토리에 추출하세요.

ZIP 다운로드

저장소를 클론하고 스킬 파일을 프로젝트에 복사하세요.

git clone https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/zustand-store-ts # Copy SKILL.md to your .claude/skills/ directory

복사

빠른 설정: 스킬 폴더를 .claude/skills/에 복사하세요. Claude가 자동으로 감지하고 사용합니다.

저장소 microsoft/skills