zustand: subscribeWithSelector로 subscribe하기

특정 state가 바뀌었을 때마다 어떤 action을 해야하는 경우 (subscribe),

subscribeWithSelector 미들웨이를 사용하면 된다.

 

subscribeWithSelector

subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubscribe

 

 

사용법

미들웨어 사용

import { subscribeWithSelector } from 'zustand/middleware'
const useDogStore = create(
  subscribeWithSelector(() => ({ paw: true, snout: true, fur: true }))
)

 

subscribe 작성

// 'paw'가 변경되었는지 감시
const unsub2 = useDogStore.subscribe((state) => state.paw, console.log)

// Subscribe는 이전 값도 보여줌
const unsub3 = useDogStore.subscribe(
  (state) => state.paw,
  (paw, previousPaw) => console.log(paw, previousPaw)
)

// Subscribe는 옵션도 제공함
const unsub4 = useDogStore.subscribe(
  (state) => [state.paw, state.fur],
  console.log,
  { equalityFn: shallow }
)

// Subscribe and fire immediately
const unsub5 = useDogStore.subscribe((state) => state.paw, console.log, {
  fireImmediately: true,
})

 

 

shallow vs subscribe

(+) shallow를 보다가 순간 구독이랑 헷갈려서 구독도 찾아봤다.

• shallow: 선택한 특정 state(s)가 바뀔 때마다만 컴포넌트 리렌더링
• subscribe: 선택한 특정 state(s)가 바뀔 때마다 특정 함수 실행

 

 

 

 

---

참고 자료

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React