@hua-labs/state

v1.0.3

Zustand

SSR

SSR-safe Zustand helpers and HUA state integrations.

$npm install @hua-labs/state

주요 기능

SSR 지원

Next.js App Router와 완벽 호환, 하이드레이션 안전

영속성

localStorage 자동 동기화 및 리하이드레이션

i18n 통합

i18n-core와 원활한 통합 지원

빠른 시작

1. 스토어 생성

typescript

import { createHuaStore } from '@hua-labs/state';

interface AppState {
  count: number;
  increment: () => void;
}

export const useAppStore = createHuaStore<AppState>({
  name: 'app-store',
  persist: true,  // localStorage 자동 저장
  initialState: (set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }),
});

2. 컴포넌트에서 사용

tsx

'use client';

import { useAppStore } from '../store/useAppStore';

function Counter() {
  const count = useAppStore((s) => s.count);
  const increment = useAppStore((s) => s.increment);

  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  );
}

3. 하이드레이션 대기

typescript

import { isStoreRehydrated, onStoreRehydrated } from '@hua-labs/state';

// 동기 체크
if (isStoreRehydrated('app-store')) {
  // 스토어가 이미 리하이드레이션됨
}

// 비동기 대기
onStoreRehydrated('app-store', () => {
  console.log('Store rehydrated!');
});

Exports

createHuaStore

SSR 안전한 Zustand 스토어 생성

isStoreRehydrated

스토어 리하이드레이션 상태 확인

onStoreRehydrated

리하이드레이션 완료 콜백 등록

createI18nStore

@hua-labs/state/integrations/i18n

i18n 통합 스토어 생성