इस लेख में, हम यह पता लगाएंगे कि Zustand के स्रोत कोड में object.is() विधि का उपयोग कैसे किया जाता है।

उपरोक्त कोड स्निपेट vanilla.ts से लिया गया है

Object.is() पद्धति का उपयोग सेटस्टेट में किया जाता है (इस पर बाद में और लेख)।

आइए पहले समझें कि object.is() विधि क्या है।

वस्तु.is()

Object.is() स्थिर विधि यह निर्धारित करती है कि दो मान समान हैं या नहीं।

नीचे दिया गया उदाहरण एमडीएन डॉक्स से लिया गया है:

    console.log(Object.is('1', 1));
    // Expected output: false

    console.log(Object.is(NaN, NaN));
    // Expected output: true

    console.log(Object.is(-0, 0));
    // Expected output: false

    const obj = {};
    console.log(Object.is(obj, {}));
    // Expected output: false

यहां थोड़ा जटिल JSON उदाहरण दिया गया है:

    const jsonObject1 = {
        name: "foo",
        age: 30
    };

    const jsonObject2 = {
        name: "bar",
        age: 30
    };

    console.log(Object.is(jsonObject1, jsonObject2)); // false

ऑब्जेक्ट.आईएस() झूठी वापसी क्यों करता है?

हालांकि jsonObject1 और jsonObject2 में एक ही सामग्री है, वे मेमोरी में अलग-अलग ऑब्जेक्ट हैं। जावास्क्रिप्ट में, वस्तुओं की तुलना संदर्भ के आधार पर की जाती है, न कि उनकी सामग्री के आधार पर। चूंकि ये दोनों ऑब्जेक्ट अलग-अलग मेमोरी स्थानों पर संग्रहीत हैं, इसलिए object.is() गलत रिटर्न देता है।

ऑब्जेक्ट.है (अगला राज्य, राज्य)

Zustand के नीचे दिए गए कोड स्निपेट में, राज्य को अद्यतन करने और श्रोताओं को सूचित करने के लिए आगे बढ़ने से पहले यह निर्धारित करने के लिए ऑब्जेक्ट.आईएस() विधि का उपयोग किया जाता है कि अगला राज्य वर्तमान स्थिति से वास्तव में अलग है या नहीं। यह जांच प्रदर्शन और अनावश्यक स्थिति अपडेट से बचने के लिए महत्वपूर्ण है।

    const setState: StoreApi['setState'] = (partial, replace) => {
      // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
      // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
      const nextState =
        typeof partial === 'function'
          ? (partial as (state: TState) => TState)(state)
          : partial
      if (!Object.is(nextState, state)) {
        const previousState = state
        state =
          (replace ?? (typeof nextState !== 'object' || nextState === null))
            ? (nextState as TState)
            : Object.assign({}, state, nextState)
        listeners.forEach((listener) => listener(state, previousState))
      }
    }

नीचे दी गई छवि ऑब्जेक्ट.आईएस() को क्रिया में दिखाती है

उपरोक्त लॉग स्टेटमेंट को जोड़ने के लिए, मैंने पीएनपीएम रन बिल्ड कमांड का उपयोग करके ज़स्टैंड को संकलित किया और डिस्ट को उदाहरण/डेमो/src में कॉपी किया। अजीब लगता है, लेकिन हम प्रयोग कर रहे हैं और पता लगा रहे हैं कि ज़स्टैंड आंतरिक रूप से कैसे काम करता है।

    const useStore = create((set) => ({
      count: 1,
      inc: () => set((state) => ({ count: state.count   1 })),
    }))

कॉलिंग इंक किसी तरह सेटस्टेट को ट्रिगर करता है, हम आने वाले लेखों में इसका पता लगाएंगे।

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

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

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

हम खुले स्रोत हैं — https://github.com/thinkthroo/thinkthroo (हमें एक स्टार अवश्य दें!)

नेक्स्ट.जेएस प्रोजेक्ट के लिए मदद चाहिए? हमसे [email protected] पर संपर्क करें

लेखक के बारे में:

अरे, मैं राम हूं। मैं एक उत्साही सॉफ्टवेयर इंजीनियर/ओएसएस टिंकरर हूं।

मेरी वेबसाइट देखें: https://www.ramunarasinga.com/

सन्दर्भ:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L71

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is