이 글에서는 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으로 문의하세요!
https://github.com/search?q=useBoundStore&type=code
https://github.com/churichard/notabase
위 내용은 Zusstand 소스 코드의 useBoundStoreWithEqualityFn이 설명되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!