Angular Academy · पाठ

अवस्था को अपरिवर्तनीय रूप से अपडेट करना

सिग्नल अवस्था पर अपरिवर्तनीय अपडेट लागू करें

पाठ 3, कुल 4 में से13 चरण

अवस्था को अपरिवर्तनीय रूप से अपडेट करना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

अपरिवर्तनीयता क्यों

सिग्नल संदर्भ के आधार पर बदलाव पहचानते हैं। यदि आप किसी ऐरे या ऑब्जेक्ट में सीधे बदलाव करते हैं, तो संदर्भ वही रहता है और उस पर निर्भर computed() सिग्नल शायद फिर से गणना न करें। हमेशा नया संदर्भ बनाएँ।

म्यूटेशन का जाल

मौजूदा ऐरे में आइटम जोड़ने से संदर्भ बदले बिना उसमें बदलाव हो जाता है। इससे बचें।

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

ऐरे के लिए स्प्रेड

स्प्रेड ऑपरेटर से नया ऐरे बनाएँ, ताकि संदर्भ बदले और उपभोक्ता फिर से चलें।

// GOOD: new array reference
this._items.update(list => [...list, item]);

आइटम हटाना

filter() का उपयोग करें। यह बिल्कुल नया ऐरे लौटाता है और मूल ऐरे को अपरिवर्तित रखता है।

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

एक आइटम अपडेट करना

नया ऐरे लौटाने के लिए map() का उपयोग करें। मेल खाने वाले ऑब्जेक्ट को स्प्रेड करके उसकी नई प्रति बनाएँ, ताकि अंदर का संदर्भ भी बदल जाए।

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

ऑब्जेक्ट के लिए स्प्रेड

ऑब्जेक्ट स्थिति के लिए पिछले ऑब्जेक्ट को स्प्रेड करें और बदले हुए फ़ील्ड को अधिलेखित करें। नेस्टेड ऑब्जेक्ट के लिए भी अपना स्प्रेड आवश्यक होता है।

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

नए मान के साथ set

स्थिति को पूरी तरह बदलते समय नए ऑब्जेक्ट के साथ set() का उपयोग स्वाभाविक रूप से अपरिवर्तनीय होता है, क्योंकि आप नया संदर्भ देते हैं।

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

computed इस पर निर्भर क्यों करता है

Computed रीड मॉडल सिग्नल के संदर्भ पर निर्भर होते हैं, इसलिए अपरिवर्तनीय अपडेट यह सुनिश्चित करते हैं कि वे फिर से गणना करें। वही ऐरे संदर्भ बनाए रखने वाला म्यूटेशन कुल और फ़िल्टर को चुपचाप पुराना छोड़ सकता है।

सहायक पैटर्न

सामान्य रूपांतरणों के लिए छोटे शुद्ध सहायक फ़ंक्शन अलग निकालें, ताकि स्टोर की विधियाँ पठनीय और एकसमान रहें।

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

गहरी नेस्टिंग में सावधानी

गहराई से नेस्ट की गई स्थिति में बहुत-से स्प्रेड की आवश्यकता होती है। यदि अपडेट कठिन होने लगें, तो स्थिति की संरचना को समतल करें या उसे कई सिग्नल में बाँट दें, ताकि हर अपडेट छोटे हिस्से तक सीमित रहे।

अपरिवर्तनीयता डिबगिंग में सहायक

क्योंकि हर अपडेट एक नया संदर्भ बनाता है, इसलिए आप समय के साथ स्नैपशॉट की तुलना कर सकते हैं, पिछली और अगली स्थिति का लॉग रख सकते हैं और छिपे हुए इन-प्लेस बदलावों की चिंता किए बिना परिवर्तनों को समझ सकते हैं।

त्वरित जाँच

अपरिवर्तनीय सिग्नल अपडेट की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने अपरिवर्तनीय अपडेट पैटर्न सीखे: ऐरे और ऑब्जेक्ट के लिए स्प्रेड, संपादन और हटाने के लिए map/filter, set के माध्यम से नए संदर्भ बनाना, और यह कि सही रिएक्टिविटी के लिए संदर्भ समानता अपरिवर्तनीयता को आवश्यक क्यों बनाती है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “अवस्था को अपरिवर्तनीय रूप से अपडेट करना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “अवस्था को अपरिवर्तनीय रूप से अपडेट करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“अवस्था को अपरिवर्तनीय रूप से अपडेट करना” में मैं क्या सीखूँगा?

सिग्नल अवस्था पर अपरिवर्तनीय अपडेट लागू करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“अवस्था को अपरिवर्तनीय रूप से अपडेट करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ