इस लेख में, हम देखेंगे कि Zustand अपने [स्रोत कोड] में useSyncExternalStoreExports का उपयोग कैसे करता है।

useSyncExternalStoreExports को यूज़-सिंक-एक्सटर्नल-स्टोर/शिम/विथ-सेलेक्टर से आयात किया जाता है। यूज़-सिंक-एक्सटर्नल-स्टोर, React.useSyncExternalStore के लिए एक बैकवर्ड-संगत शिम है जो हुक्स को सपोर्ट करने वाले किसी भी रिएक्ट के साथ काम करता है।

उपरोक्त वाक्य को पढ़कर, आप सोच रहे होंगे कि यह कैसा यूज़सिंकएक्सटर्नलस्टोर है।

useSyncExternalStore

useSyncExternalStore एक रिएक्ट हुक है जो आपको बाहरी स्टोर की सदस्यता लेने की सुविधा देता है।

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

बाहरी स्टोर से एक मान पढ़ने के लिए यूज़सिंकएक्सटर्नलस्टोर का उपयोग करें जो हो सकता है:

1. तृतीय-पक्ष राज्य प्रबंधन पुस्तकालय जो प्रतिक्रिया के बाहर राज्य रखते हैं।

2. ब्राउज़र एपीआई जो इसके परिवर्तनों की सदस्यता के लिए एक परिवर्तनीय मूल्य और घटनाओं को उजागर करता है।

उदाहरण उपयोग:

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

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

उपरोक्त उदाहरण रिएक्ट डॉक्स से लिया गया है।

Zustand में उपयोगसिंकएक्सटर्नलस्टोर का उपयोग:

ज़स्टैंड 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, चयनकर्ता और समानताFn है।

हमारे बारे में:

थिंक थ्रू में, हम ओपन-सोर्स परियोजनाओं से प्रेरित सर्वोत्तम प्रथाओं को सिखाने के मिशन पर हैं।

नेक्स्ट.जेएस/रिएक्ट में उन्नत वास्तुशिल्प अवधारणाओं का अभ्यास करके अपने कोडिंग कौशल को 10 गुना करें, सर्वोत्तम प्रथाओं को सीखें और उत्पादन-ग्रेड परियोजनाओं का निर्माण करें।

हम खुले स्रोत हैं - 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#usesyncexinternalstore

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

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