Neste artigo, entenderemos como a função useBoundStoreWithEqualityFn é usada no código-fonte do Zustand.

O código acima foi escolhido em https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn é chamado em createWithEqualityFnImplfunction e retorna outra função chamada useStoreWithEqualityFn.

Vejamos o que está em useStoreWithEqualityFn.

// 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 é um React Hook que permite assinar uma loja externa e useSyncExternalStoreWithSelector é importado conforme mostrado abaixo:

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

slice retornado por esta função, useStoreWithEqualityFn é posteriormente usado em createWithEqualityFnImpl .

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

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.assign atualiza a fatia retornada por useBoundStoreWithEqualityFn com a “api”.

A captura de tela abaixo demonstra com um exemplo como Object.assign faz a atualização

e finalmente useBoundStoreWithEqualityFn é retornado por createWithEqualityFnImpl.

Sobre nós:

No Think Throo, temos a missão de ensinar as melhores práticas inspiradas em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Aprimore sua equipe com nossos cursos avançados baseados na arquitetura de base de código. Entre em contato conosco pelo e-mail [email protected] para saber mais!

Referências:

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

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