@makecode/state-manager

@makecode/state-manager는 간단하면서도 강력한 상태 관리 라이브러리입니다. 이 라이브러리는 중소 규모 프로젝트에서 전역 상태를 관리하기에 적합합니다.

주요 기능

• 간단한 API: 직관적인 메서드(get, set, merge)로 상태 관리.
• 이벤트 기반 구독: 상태 변경 시 실행되는 핸들러 등록.
• 특정 상태값 감지: 특정 상태 값에 따라 핸들러를 실행.
• 타입스크립트 지원: 타입 안전한 상태 관리.

설치 방법

라이브러리를 설치하려면 다음 명령어를 사용하세요:

npm install @makecode/state-manager

또는

yarn add @makecode/state-manager

사용법

1. 초기화 및 상태 설정

StateManager 인스턴스를 생성하고 상태를 설정합니다:

import StateManager from '@makecode/state-manager';

const state = new StateManager();

// 상태 설정
state.set({
  key: 'user',
  value: { name: 'Alice', age: 25 },
});

2. 상태 구독

상태가 변경될 때마다 특정 로직을 실행하고 싶다면 구독 기능을 사용할 수 있습니다:

// 상태 변경 구독
const unsubscribe = state.subscribe('user', (newValue, oldValue) => {
  console.log('사용자 상태 변경!');
  console.log('이전:', oldValue);
  console.log('현재:', newValue);
});

// 상태 변경
state.set({
  key: 'user',
  value: { name: 'Alice', age: 26 },
});

// 구독 해제
unsubscribe();

3. 상태 병합

기존 상태를 유지하면서 일부 값을 업데이트하려면 merge 메서드를 사용하세요:

state.merge({
  key: 'user',
  value: { location: 'New York' },
});

console.log(state.get('user'));
// 출력: { name: 'Alice', age: 26, location: 'New York' }

4. 특정 값 이벤트 핸들링

특정 상태 값에 따라 핸들러를 실행하려면 on 메서드를 사용합니다:

state.on({
  key: 'user.age',
  value: 30,
  handler: () => {
    console.log('사용자의 나이가 30이 되었습니다!');
  },
});

// 상태 변경
state.set({ key: 'user', value: { name: 'Alice', age: 30 } });
// 출력: 사용자의 나이가 30이 되었습니다!