En este artículo, analizaremos cómo se implementa createWithEqualityFnImpl registrando parte de su valor para comprenderlo mejor.

Como puede ver en la imagen de arriba, createWithEqualityFn llama a la función createWithEqualityFnImpl. Este patrón se utiliza en vanilla.ts y se muestra a continuación:

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

createStore llama a createStoreImpl y createWithEqualityFn llama a createWithhEqualityFnImpl.

Antes de pasar a la ejecución de createWithEqualityFn, primero comprendamos el propósito de usar createWithEqualityFn.

La captura de pantalla anterior es de https://github.com/pmndrs/zustand/tree/main

Puedes usar createWithEqualityFn para tener más control sobre la reproducción.

crearConIgualdadFn

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
}

Esta es una función de sobrecarga. useStoreWithEqualityFn tiene 3 definiciones:

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,
) {

Veamos cómo se ve el valor del sector:

valor: 1 se omite porque configuramos el código para evitar que se vuelva a representar cuando el valor es 1, como se muestra a continuación:

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/pmndrs/zustand/blob/main/src/traditional.ts#L74

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