4. usestore-ts

• @Store(), @Action() 데코레이터를 이용해서 더 간단하게 store를 만들어 사용할 수 있음

import { singleton } from 'tsyringe';

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

@singleton()
@Store()
export default class CounterStore {
  count = 0;

  @Action()
    increase(step = 1) {
    this.count += step;
  }

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

커스텀 훅으로 만들기

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);
}

기존에 이벤트 리스터를 만들고 publish해서 사용하던 부분을 데코레이터로 깔끔하게 대체할 수 있음