useBoundStoreWithEqualityFn im Quellcode von Zustand erklärt.

In diesem Artikel werden wir verstehen, wie die Funktion useBoundStoreWithEqualityFn im Quellcode von Zustand verwendet wird.

Der obige Code stammt von https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn wird in der Funktion „createWithEqualityFnImpl“ aufgerufen und gibt eine weitere Funktion namens useStoreWithEqualityFn zurück.

Schauen wir uns an, was StoreWithEqualityFn verwendet.

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  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 ist ein React Hook, mit dem Sie einen externen Store abonnieren und useSyncExternalStoreWithSelector wie unten gezeigt importieren können:

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

Slice, das von dieser Funktion zurückgegeben wird, useStoreWithEqualityFn wird weiter in createWithEqualityFnImpl verwendet.

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

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.assign aktualisiert das von useBoundStoreWithEqualityFn zurückgegebene Slice mit der „API“.

Der Screenshot unten zeigt anhand eines Beispiels, wie Object.assign das Update durchführt

und schließlich wird useBoundStoreWithEqualityFn von createWithEqualityFnImpl zurückgegeben.

Über uns:

Bei Think Throo haben wir die Mission, die Best Practices zu vermitteln, die von Open-Source-Projekten inspiriert sind.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Verbessern Sie die Fähigkeiten Ihres Teams mit unseren Fortgeschrittenenkursen basierend auf der Codebasis-Architektur. Kontaktieren Sie uns unter hello@thinkthroo.com, um mehr zu erfahren!

Referenzen:

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

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

Das obige ist der detaillierte Inhalt vonuseBoundStoreWithEqualityFn im Quellcode von Zustand erklärt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!