Dans cet article, nous verrons comment Zustand utilise useSyncExternalStoreExports dans son [code source.]

useSyncExternalStoreExports est importé depuis use-sync-external-store/shim/with-selector. use-sync-external-store est une cale rétrocompatible pour React.useSyncExternalStore Fonctionne avec n'importe quel React prenant en charge les Hooks.

En lisant la phrase ci-dessus, vous vous demandez peut-être à quoi sertSyncExternalStore.

useSyncExternalStore

useSyncExternalStore est un React Hook qui vous permet de vous abonner à un magasin externe.

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

Utilisez useSyncExternalStore pour lire une valeur d'un magasin externe qui peut être :

1. Bibliothèques de gestion d'état tierces qui détiennent l'état en dehors de React.

2. API de navigateur qui exposent une valeur mutable et des événements pour s'abonner à ses modifications.

Exemple d'utilisation :

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

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

L'exemple ci-dessus est tiré de la documentation React.

Utilisation de useSyncExternalStore dans Zustand :

Zustand utilise useSyncExternalStore dans 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 est déstructuré de useSyncExternalStoreExports et est utilisé dans useStoreWithEqualityFn.

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 a api.subscribe, api.getState, api.getInitialState, sélecteur et égalitéFn.

À propos de nous:

Chez Think Throo, nous avons pour mission d'enseigner les meilleures pratiques inspirées des projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et créez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Développez les compétences de votre équipe avec nos cours avancés basés sur l'architecture de base de code. Contactez-nous à [email protected] pour en savoir plus !

Références :

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