In diesem Artikel werden wir uns ansehen, wie Zustand useSyncExternalStoreExports in seinem [Quellcode] verwendet.

useSyncExternalStoreExports wird aus use-sync-external-store/shim/with-selector importiert. use-sync-external-store ist ein abwärtskompatibler Shim für React.useSyncExternalStore Funktioniert mit jedem React, der Hooks unterstützt.

Wenn Sie den obigen Satz lesen, fragen Sie sich vielleicht, was ein useSyncExternalStore ist.

useSyncExternalStore

useSyncExternalStore ist ein React Hook, mit dem Sie einen externen Store abonnieren können.

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

Verwenden Sie useSyncExternalStore, um einen Wert aus einem externen Speicher zu lesen, der sein kann:

1. Zustandsverwaltungsbibliotheken von Drittanbietern, die Zustände außerhalb von React speichern.

2. Browser-APIs, die einen veränderlichen Wert und Ereignisse bereitstellen, um seine Änderungen zu abonnieren.

Beispielverwendung:

import { useSyncExternalStore } from 'react';
import { todosStore } from './todoStore.js';

function TodosApp() {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
  // ...
}

Das obige Beispiel stammt aus React-Dokumenten.

useSyncExternalStore-Nutzung im Zustand:

Zustand verwendet useSyncExternalStore in src/traditional.ts.

import ReactExports from 'react'
// eslint-disable-next-line import/extensions
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
import { createStore } from './vanilla.ts'
import type {
  Mutate,
  StateCreator,
  StoreApi,
  StoreMutatorIdentifier,
} from './vanilla.ts'

const { useDebugValue } = ReactExports
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports

useSyncExternalStoreWithSelector wird von useSyncExternalStoreExports destrukturiert und wird in useStoreWithEqualityFn verwendet.

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
}

useSyncExternalStoreWithSelector hat api.subscribe, api.getState, api.getInitialState, selector und equalityFn.

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die von Open-Source-Projekten inspirierten Best Practices zu vermitteln.

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

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 [email protected], um mehr zu erfahren!

Referenzen:

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L44

2. https://www.npmjs.com/package/use-sync-external-store

3. https://legacy.reactjs.org/docs/hooks-reference.html#usesyncexternalstore

4. https://react.dev/reference/react/useSyncExternalStore

5. https://github.com/reactwg/react-18/discussions/86