usestore-ts

usestore-ts

시드웨일에서 만든 전역 상태관리 도구

지금까지 배운 decorator, metadata를 활용하는 것이 특징!

Install

npm i usestore-ts

내부적으로 typescript decorator를 사용하므로 tsconfig.json 옵션들을 수정해주어야 한다.

  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,

Usage

기존에 TSyringe + reflect-metadata를 사용하여 만든 간단한 스토어를 usestore-ts 를 사용하여 마이그레이션 해보자.

CounterStore

usestore-ts에서 제공하는 Store 데코레이터는 기존 ObjectStore 클래스를 대체한다.

즉, ObjectStore가 제공하는 기능 (구독 관리, 상태변경을 알리는 작업 등)을 담고 있다는 것

import { singleton } from 'tsyringe';
import { Store, Action } from 'usestore-ts';

/* 
 * 싱글톤 데코레이터를 스토어 데코레이터 보다 상위에 두자.
 * 싱글톤을 먹은 클래스를 스토어 데코레이터를 사용하면 이슈가 있을 수 있음
 */ 
@singleton()
@Store()
export default class CounterStore {
  counter = 0;
  // 액션 데코레이터는 publish 메서드를 머금고 있다.
  @Action()
  increase(step = 1) {
    this.counter += step;
  }

  @Action()
  decrease(step = 1) {
    this.counter -= step;
  }
}

useCounterStore

usestore-ts가 제공하는 useStore 훅으로 기존 useObjectStore를 대체

forceUpdate 리스너를 머금고 있다.

import { container } from 'tsyringe';
import { useStore } from 'usestore-ts';

import CounterStore from '../stores/counterStore';

export default function useCounterStore() {
  const store = container.resolve(CounterStore);

  return useStore(store);
}

CounterController.tsx

useStore(store)는 [state, store] 형태의 값을 반환한다.

state로 스토어에 담긴 값들을 사용

store는 스토어에 담긴 액션 api들이 담겨 있다.

import useCounterStore from '../hooks/useCounterStore';

export default function CounterController() {
  const [, store] = useCounterStore();

  const handleClickIncrease = (step?: number) => () => {
    store.increase(step);
  };

  const handleClickDecrease = (step?: number) => () => {
    store.decrease(step);
  };

  return (
    <div>
      <button type="button" onClick={handleClickIncrease(10)}>
        Increase 10
      </button>
      <button type="button" onClick={handleClickIncrease()}>
        Increase
      </button>
      <button type="button" onClick={handleClickDecrease(10)}>
        Decrease 10
      </button>
      <button type="button" onClick={handleClickDecrease()}>
        Decrease
      </button>
    </div>
  );
}

Counter.tsx

import useCounterStore from '../hooks/useCounterStore';

export default function Counter() {
  const [{ counter }] = useCounterStore();

  return (
    <div>
      <p>{`counter: ${counter}`}</p>
    </div>
  );
}

FECONF 2022 - 상태관리 이 전쟁을 끝내러 왔다