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

يتم اختيار الكود أعلاه من https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

يتم استدعاء useBoundStoreWithEqualityFn في وظيفة createWithEqualityFnImpl ويقوم بإرجاع وظيفة أخرى تسمى useStoreWithEqualityFn.

دعونا نلقي نظرة على ما هو قيد الاستخدامStoreWithEqualityFn.

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
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
}

useSyncExternalStore هو خطاف تفاعلي يتيح لك الاشتراك في متجر خارجي ويتم استيراد useSyncExternalStoreWithSelector كما هو موضح أدناه:

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

الشريحة التي يتم إرجاعها بواسطة هذه الوظيفة، يتم استخدام useStoreWithEqualityFn أيضًا في createWithEqualityFnImpl .

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

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

يقوم Object.sign بتحديث الشريحة التي تم إرجاعها بواسطة useBoundStoreWithEqualityFn باستخدام "api".

توضح لقطة الشاشة أدناه بمثال كيفية قيام Object.assin بالتحديث

وأخيرًا يتم إرجاع useBoundStoreWithEqualityFn بواسطة createWithEqualityFnImpl.

معلومات عنا:

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

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في Next.js/React، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوح المصدر - https://github.com/thinkthroo/thinkthroo (لا تعطينا نجمة!)

قم بتعزيز مهارات فريقك من خلال دوراتنا المتقدمة المبنية على بنية قاعدة التعليمات البرمجية. تواصل معنا على [email protected] لمعرفة المزيد!

مراجع:

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

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