В этой статье мы рассмотрим, как Zustand использует useSyncExternalStoreExports в своем [исходном коде.]

useSyncExternalStoreExports импортируется из use-sync-external-store/shim/with-selector. use-sync-external-store — это обратно совместимая оболочка для React.useSyncExternalStore. Работает с любым React, поддерживающим хуки.

Прочитав приведенное выше предложение, вам может быть интересно, что такое useSyncExternalStore.

useSyncExternalStore

useSyncExternalStore — это React Hook, который позволяет вам подписаться на внешний магазин.

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

Используйте useSyncExternalStore для чтения значения из внешнего хранилища, которое может быть:

1. Сторонние библиотеки управления состоянием, которые хранят состояние вне React.

2. API браузера, которые предоставляют изменяемое значение и события для подписки на его изменения.

Пример использования:

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

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

Приведенный выше пример взят из документации React.

Использование useSyncExternalStore в Zustand:

Zustand использует useSyncExternalStore в 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 деструктурирован из useSyncExternalStoreExports и используется в 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 имеет api.subscribe, api.getState, api.getInitialState, селектор и функцию равенства.

О нас:

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

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

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

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

Ссылки:

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