Angular Signals और Effects

Angular Signals और Effects

Angular ने reactivity को संभालने के अपने तरीके को बदल दिया है। अब हर छोटे बदलाव का पता लगाने के लिए आपको Zone.js की आवश्यकता नहीं है। Signals Angular को UI के केवल उन विशिष्ट हिस्सों को अपडेट करने की अनुमति देते हैं जिनमें बदलाव होता है। यह आपके ऐप्स को तेज़ बनाता है और zoneless mode को सक्षम करता है।

Signals क्या हैं?

एक signal एक reactive value के लिए कंटेनर है। जब value बदलती है, तो Angular को ठीक से पता होता है कि template के किन हिस्सों को अपडेट करना है।

• signal(): एक नया signal बनाता है। value को बदलने के लिए .set() का उपयोग करें या वर्तमान value के आधार पर उसे बदलने के लिए .update() का उपयोग करें।
• computed(): एक read-only signal बनाता है। यह अपनी value अन्य signals से प्राप्त करता है। Angular इसकी गणना तभी करता है जब आप इसे पढ़ते हैं और परिणाम को cache कर लेता है।
• effect(): जब कोई signal बदलता है तो कोड चलाता है। इसका उपयोग logging या manual DOM changes जैसे side effects के लिए करें।

Signals बनाम RxJS का उपयोग कब करें

आपको इनमें से किसी एक को चुनने की आवश्यकता नहीं है। आपको अलग-अलग कार्यों के लिए दोनों का उपयोग करना चाहिए।

Signals का उपयोग करें:

• UI state को बनाए रखने के लिए।
• Template rendering को संचालित करने के लिए।
• @Input() और @Output() को बदलने के लिए।
• Zoneless apps में काम करने के लिए।

RxJS का उपयोग करें:

• HTTP या WebSockets जैसे async streams को संभालने के लिए।
• Debouncing या streams को switch करने जैसे जटिल logic के लिए।
• कई event sequences को संयोजित करने के लिए।

आप rxjs-interop का उपयोग करके उन्हें जोड़ सकते हैं:

• toSignal(): एक Observable को Signal में बदलता है।
• toObservable(): एक Signal को Observable में बदलता है।

नए Decorator-Free APIs

Angular 17+ ने decorators का उपयोग किए बिना data flow को संभालने के नए तरीके पेश किए हैं।

• input(): parent से आने वाले डेटा के लिए एक read-only signal।
• model(): two-way binding के लिए एक writable signal। यह पुराने @Input() और @Output() पैटर्न की जगह लेता है।
• output(): child से parent को events भेजने का एक तरीका। यह signal नहीं है, लेकिन यह आपके कोड को सरल बनाता है।

यह React से बेहतर क्यों है

यदि आप React जानते हैं, तो अवधारणाएं (concepts) समान हैं लेकिन उनका कार्यान्वयन (execution) अलग है।

• Automatic Tracking: React में, आपको एक array में dependencies को सूचीबद्ध करना होता है। Angular में, सिस्टम स्वचालित रूप से ट्रैक करता है कि आप किन signals का उपयोग कर रहे हैं। आप dependency भूल नहीं सकते।
• Precision Updates: React अक्सर पूरे components को re-render करता है। Angular signals केवल उन्हीं विशिष्ट DOM nodes को अपडेट करते हैं जो उस value पर निर्भर करते हैं।
• No Stale Closures: Signals को कॉल करने पर वे हमेशा वर्तमान value प्रदान करते हैं।

Source: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn