Maison > Article > interface Web > useBoundStoreWithEqualityFn dans le code source de Zustand expliqué.
Dans cet article, nous comprendrons comment la fonction useBoundStoreWithEqualityFn est utilisée dans le code source de Zustand.
Le code ci-dessus est extrait de https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
useBoundStoreWithEqualityFn est appelé dans la fonction createWithEqualityFnImpl et renvoie une autre fonction nommée useStoreWithEqualityFn.
Regardons ce qui est utilisé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 est un React Hook qui vous permet de vous abonner à un magasin externe et useSyncExternalStoreWithSelector est importé comme indiqué ci-dessous :
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
tranche renvoyée par cette fonction, useStoreWithEqualityFn est ensuite utilisée dans createWithEqualityFnImpl .
const useBoundStoreWithEqualityFn: any = ( selector?: any, equalityFn = defaultEqualityFn, ) => useStoreWithEqualityFn(api, selector, equalityFn) Object.assign(useBoundStoreWithEqualityFn, api) return useBoundStoreWithEqualityFn
Object.assign met à jour la tranche renvoyée par useBoundStoreWithEqualityFn avec l'« api ».
La capture d'écran ci-dessous montre avec un exemple comment Object.assign effectue la mise à jour
et enfin useBoundStoreWithEqualityFn est renvoyé par createWithEqualityFnImpl.
Chez Think Throo, nous avons pour mission d'enseigner les meilleures pratiques inspirées des projets open source.
10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et construisez des projets de niveau production.
Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)
Développez les compétences de votre équipe avec nos cours avancés basés sur l'architecture de base de code. Contactez-nous à hello@thinkthroo.com pour en savoir plus !
https://github.com/search?q=useBoundStore&type=code
https://github.com/churichard/notabase
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!