Dans cet article, nous analyserons comment createWithEqualityFnImpl est implémenté en enregistrant une partie de sa valeur pour mieux comprendre.

Comme vous pouvez le constater à partir de l'image ci-dessus, createWithEqualityFn appelle la fonction createWithEqualityFnImpl. Ce modèle est utilisé dans vanilla.ts ainsi que démontré ci-dessous :

export const createStore = ((createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore

createStore appelle createStoreImpl et createWithEqualityFn appelle createWithhEqualityFnImpl.

Avant de passer à l'exécution de createWithEqualityFn, comprenons d'abord le but de l'utilisation de createWithEqualityFn.

La capture d'écran ci-dessus provient de https://github.com/pmndrs/zustand/tree/main

Vous pouvez utiliser createWithEqualityFn pour avoir plus de contrôle sur le nouveau rendu.

créerAvecÉgalitéFn

const createWithEqualityFnImpl = (
  createState: StateCreator,
  defaultEqualityFn?: (a: U, b: U) => boolean,
) => {
  const api = createStore(createState)

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

  Object.assign(useBoundStoreWithEqualityFn, api)

  return useBoundStoreWithEqualityFn
}

useStoreWithEqualityFn

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

export function useStoreWithEqualityFn, U>(
  api: S,
  selector: (state: ExtractState) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

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
}

Il s'agit d'une fonction de surcharge. useStoreWithEqualityFn a 3 définitions :

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

export function useStoreWithEqualityFn, U>(
  api: S,
  selector: (state: ExtractState) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {

Voyons à quoi ressemble la valeur de la tranche :

value : 1 est ignoré car nous définissons le code pour éviter un nouveau rendu lorsque la valeur est 1, comme indiqué ci-dessous :

À 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 créez 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 à [email protected] pour en savoir plus !

Références :

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L74

2. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L39