반응형
특정 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
반응형
'Front-End: Web' 카테고리의 다른 글
[CSS] Background 속성 작성 순서: The Order of the Background Shorthand Property (0) | 2024.01.29 |
---|---|
shallow로 zustand 최적화하기 (0) | 2023.07.30 |
[React-Query] createJSONStorage (0) | 2023.07.30 |
React Query: Optimistic Updates (0) | 2023.07.22 |
절대 경로 설정하기 (craco + typescript + storybook) (0) | 2023.07.22 |