En este artículo, entenderemos cómo se utiliza la función useBoundStoreWithEqualityFn en el código fuente de Zustand.

El código anterior se eligió de https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn se llama en la función createWithEqualityFnImpl y devuelve otra función llamada useStoreWithEqualityFn.

Veamos lo que está en usoStoreWithEqualityFn.

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
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
}

useSyncExternalStore es un React Hook que le permite suscribirse a una tienda externa y useSyncExternalStoreWithSelector se importa como se muestra a continuación:

import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'

segmento devuelto por esta función, useStoreWithEqualityFn se utiliza además en createWithEqualityFnImpl .

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

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.assign actualiza el segmento devuelto por useBoundStoreWithEqualityFn con la "api".

La siguiente captura de pantalla muestra con un ejemplo cómo Object.assign realiza la actualización

y finalmente useBoundStoreWithEqualityFn es devuelto por createWithEqualityFnImpl.

Sobre nosotros:

En Think Throo, tenemos la misión de enseñar las mejores prácticas inspiradas en proyectos de código abierto.

10 veces tus habilidades de codificación practicando conceptos arquitectónicos avanzados en Next.js/React, aprende las mejores prácticas y crea proyectos de nivel de producción.

Somos de código abierto: https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)

Mejora las habilidades de tu equipo con nuestros cursos avanzados basados ​​en arquitectura de base de código. ¡Comuníquese con nosotros en [email protected] para obtener más información!

Referencias:

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

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