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

उपरोक्त कोड स्निपेट वेनिला.टीएस से है, जब आप एक राज्य सेट करते हैं, तो आपके राज्य ऑब्जेक्ट को अपडेट करने के लिए ऑब्जेक्ट.असाइन का उपयोग किया जाता है।

आइए पहले ऑब्जेक्ट.असाइन की मूल बातें समझें:

ऑब्जेक्ट.असाइन()

ऑब्जेक्ट.असाइन() स्थिर विधि एक या अधिक स्रोत ऑब्जेक्ट से सभी गणना योग्य गुणों को एक लक्ष्य ऑब्जेक्ट में कॉपी करती है। यह संशोधित लक्ष्य वस्तु लौटाता है।

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

लक्ष्य ऑब्जेक्ट में बी मान को स्रोत ऑब्जेक्ट में बी मान से बदल दिया जाता है।

वास्तव में सरल है ना? आइए अब कुछ प्रयोग चलाएं और समझें कि कैसे ज़स्टैंड का सेटस्टेट ऑब्जेक्ट.असाइन() विधि का लाभ उठाता है।

Zustand के स्रोत कोड में object.assign():

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

उपरोक्त कोड स्निपेट में यह नेस्टेड टर्नरी ऑपरेटर है। यदि रिप्लेस शून्य नहीं है, तो स्टेट रिप्लेस कर दिया जाएगा या यदि नेक्स्टस्टेट कोई ऑब्जेक्ट नहीं है, तो नेक्स्टस्टेट को वैसे ही लौटा दें, लेकिन हम जिस चीज में रुचि रखते हैं, वह है ऑब्जेक्ट.असाइन ({}, स्टेट, न्यूस्टेट)।

आइए पहले लॉग इन करें और देखें कि राज्य में क्या है और जब आप अपना राज्य अपडेट करते हैं तो अगला राज्य बताएं। मैंने जो उदाहरण चुना वह ज़स्टैंड के स्रोत कोड में डेमो उदाहरण से है। मैंने कोड को थोड़ा संशोधित किया ताकि हम कुछ कंसोल स्टेटमेंट डाल सकें और इन प्रयोगों को चला सकें।

इस सरल उदाहरण में, जब गिनती बढ़ाई जाती है, तो यह ऑब्जेक्ट.असाइन का उपयोग करके राज्य ऑब्जेक्ट को अपडेट करने के लिए नीचे आता है।

अगली बार, जब आप अपने JSON ऑब्जेक्ट पर कुछ अपडेट करने का प्रयास कर रहे हों, तो object.assign का उपयोग करें।

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

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

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

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

क्या आप अपने व्यवसाय के लिए विशेष वेब सिस्टम बनाना चाहते हैं? हमसे [email protected] पर संपर्क करें

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

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

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

सन्दर्भ:

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

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