이 글에서는 Zustand 소스 코드에서 useBoundStoreWithEqualityFn 함수가 어떻게 사용되는지 알아보겠습니다.

위 코드는 https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80에서 선택되었습니다.

useBoundStoreWithEqualityFn은 createWithEqualityFnImpl 함수에서 호출되고 useStoreWithEqualityFn이라는 다른 함수를 반환합니다.

사용 중인 내용을 살펴보겠습니다.StoreWithEqualityFn.

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}

useSyncExternalStore는 외부 저장소를 구독할 수 있게 해주는 React Hook이며 아래와 같이 useSyncExternalStoreWithSelector를 가져올 수 있습니다.

import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'

이 함수에 의해 반환된 슬라이스, useStoreWithEqualityFn은 createWithEqualityFnImpl에서 추가로 사용됩니다.

const useBoundStoreWithEqualityFn: any = (
  selector?: any,
  equalityFn = defaultEqualityFn,
) => useStoreWithEqualityFn(api, selector, equalityFn)

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.sign은 useBoundStoreWithEqualityFn에서 반환된 슬라이스를 "api"로 업데이트합니다.

아래 스크린샷은 Object.sign이 업데이트를 수행하는 방법의 예를 보여줍니다.

그리고 마지막으로 createWithEqualityFnImpl에 의해 useBoundStoreWithEqualityFn이 반환됩니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배 높이고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 [email protected]으로 문의하세요!

참조:

1. https://github.com/search?q=useBoundStore&type=code

2. https://github.com/churichard/notabase