في هذه المقالة، سننظر في كيفية استخدام Zustand لـ useSyncExternalStoreExports في [كود المصدر الخاص بها.]

يتم استيراد useSyncExternalStoreExports من use-sync-external-store/shim/with-selector. use-sync-external-store عبارة عن شريط متوافق مع الإصدارات السابقة لـ React.useSyncExternalStore يعمل مع أي React يدعم الخطافات.

بقراءة الجملة أعلاه، قد تتساءل ما هو useSyncExternalStore.

استخدامSyncExternalStore

useSyncExternalStore هو خطاف تفاعلي يتيح لك الاشتراك في متجر خارجي.

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

استخدم useSyncExternalStore لقراءة قيمة من متجر خارجي يمكن أن تكون:

1. مكتبات إدارة الحالة التابعة لجهات خارجية والتي تحتفظ بحالة خارج React.

2. واجهات برمجة تطبيقات المتصفح التي تكشف عن قيمة قابلة للتغيير وأحداث للاشتراك في تغييراتها.

مثال للاستخدام:

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

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

تم اختيار المثال أعلاه من مستندات React.

استخدام SyncExternalStore في 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، محدد وequalityFn.

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم أفضل الممارسات المستوحاة من المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في 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