Zusstand 소스 코드의 useBoundStoreWithEqualityFn이 설명되었습니다.

이 글에서는 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<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  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.ass가 업데이트를 수행하는 방법을 예시와 함께 보여줍니다

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

회사 소개:

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

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

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

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

참고자료:

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

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

위 내용은 Zusstand 소스 코드의 useBoundStoreWithEqualityFn이 설명되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!