В этой статье мы разберемся, как функция useBoundStoreWithEqualityFn используется в исходном коде Zustand.

Приведенный выше код взят из https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn вызывается в функции createWithEqualityFnImpl и возвращает другую функцию с именем useStoreWithEqualityFn.

Давайте посмотрим, что используется StoreWithEqualityFn.

// 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 — это React Hook, который позволяет вам подписаться на внешнее хранилище, а useSyncExternalStoreWithSelector импортируется, как показано ниже:

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

фрагмент, возвращаемый этой функцией, useStoreWithEqualityFn далее используется в createWithEqualityFnImpl .

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

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.assign обновляет фрагмент, возвращаемый useBoundStoreWithEqualityFn, с помощью «api».

На снимке экрана ниже показано, как Object.assign выполняет обновление

и, наконец, функция useBoundStoreWithEqualityFn возвращает функцию createWithEqualityFnImpl.

О нас:

В Think Throo мы стремимся обучать лучшим практикам, вдохновленным проектами с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в Next.js/React, изучайте лучшие практики и создавайте проекты промышленного уровня.

У нас открытый исходный код — https://github.com/thinkthroo/thinkthroo (дайте нам звезду!)

Повышайте квалификацию своей команды с помощью наших продвинутых курсов, основанных на архитектуре кодовой базы. Чтобы узнать больше, напишите нам по адресу [email protected]!

Ссылки:

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

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