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.

À propos de nous :

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 !

Références :

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

2. 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!