👩‍🎨 ⏭️ 🚴🏿 कोणीय: NGRX के लिए एक स्पष्ट परिचय 👧🏼 ⛵️ 👩🏿‍💼

इस लेख का उद्देश्य ngrx को एक साफ और स्पष्ट दृश्य देना है । ऐसा करने के लिए, मैं समझाता हूं कि आपको ngrx के बारे में जानने और समझने की क्या आवश्यकता है, और फिर हम इसे सरल और स्पष्ट कोड उदाहरणों के साथ कार्रवाई में देखेंगे।

यहाँ उन विषयों की एक सूची दी गई है जिन पर हम इस लेख में चर्चा करेंगे:

Ngrx क्या है
Ngrx के उपयोग के लाभ
Ngrx का उपयोग करने के नुकसान
जब ngrx का उपयोग करना है
कार्रवाई, गियरबॉक्स, चयनकर्ता, भंडारण और प्रभाव

एक उदाहरण उपयोग के साथ निरंतर लेख: "कोणीय: NGRX का उपयोग करने का एक उदाहरण । "

NGRX क्या है

NGRX, Redux पैटर्न द्वारा "प्रेरित" पुस्तकालयों का एक समूह है, जो बदले में, फ्लक्स पैटर्न द्वारा "प्रेरित" है। सीधे शब्दों में कहें तो इसका मतलब है कि Redux पैटर्न फ्लक्स पैटर्न का सरलीकृत संस्करण है, और NGRX Redux पैटर्न का कोणीय / rxjs संस्करण है।

Redux के "कोणीय / rxjs" संस्करण से मेरा क्या मतलब है ... "कोणीय" भाग यह है कि ngrx कोणीय अनुप्रयोगों में उपयोग के लिए एक पुस्तकालय है। "Rxjs" का एक हिस्सा यह है कि ngrx कार्यान्वयन rxjs स्ट्रीम के आसपास काम करता है । इसका मतलब है कि यह rxjs द्वारा प्रदान किए गए अवलोकन योग्य और विभिन्न अवलोकन ऑपरेटरों का उपयोग करके काम करता है।

इस योजना का मुख्य लक्ष्य तीन बुनियादी सिद्धांतों के आधार पर कंटेनर की अनुमानित स्थिति सुनिश्चित करना है।

आइए Redux मॉडल के तीन सिद्धांतों को देखें और उनके द्वारा प्रदान किए जाने वाले सबसे महत्वपूर्ण लाभों को इंगित करें।

सत्य का एकमात्र स्रोत

Redux / ngrx आर्किटेक्चर के मामले में, इसका अर्थ है कि आपके संपूर्ण एप्लिकेशन की स्थिति ऑब्जेक्ट ट्री में उसी रिपॉजिटरी में संग्रहीत है।

एक दुकान में? हम बाद में रिपॉजिटरी के बारे में बात करेंगे, लेकिन एक सामान्य समझ के लिए, वे राज्य को बनाए रखने और उस पर परिवर्तन लागू करने के लिए जिम्मेदार हैं जब उन्हें इसके बारे में बताया जाता है (जब कार्रवाई भेजी जाती है, तो हम उनके बारे में भी बाद में बात करेंगे)।

सच्चाई का एक स्रोत होने के लाभ कई हैं, लेकिन मेरे लिए सबसे दिलचस्प (क्योंकि यह किसी भी कोणीय अनुप्रयोग को प्रभावित करेगा) निम्नलिखित हैं:

जब आप एक कोणीय अनुप्रयोग बनाते हैं, तो आप आमतौर पर राज्य को विभाजित करते हैं और कई सेवाओं को संभालते हैं। जैसे-जैसे आपका आवेदन बढ़ता है, आपके राज्य में ट्रैकिंग परिवर्तन अधिक से अधिक कठिन हो जाता है और परिणामस्वरूप यह गड़बड़ हो जाता है, इसे डिबग करना और बनाए रखना मुश्किल होता है। सत्य का एक ही स्रोत इस समस्या को हल करता है, क्योंकि राज्य केवल एक वस्तु और एक में संसाधित होता है। स्थान, इसलिए डिबगिंग या परिवर्तन जोड़ना बहुत आसान हो जाता है।

पढ़ें- केवल राज्य

आप राज्य को कभी भी सीधे नहीं बदलेंगे, इसके बजाय आप ऑब्जेक्ट के साथ कार्यों का वर्णन करने वाले कार्यों को भेजेंगे (ये राज्य को प्राप्त करने, जोड़ने, हटाने या अपडेट करने जैसी चीजें हो सकती हैं)।

एक कार्रवाई सबमिट करें? .. हम बाद में क्रियाओं के बारे में बात करेंगे, लेकिन एक सामान्य समझ के लिए, ये आपके आवेदन पर ऑपरेशन के पहचानकर्ता हैं, और कार्रवाई शुरू करने के लिए आवेदन को बताने के लिए उन्हें लॉन्च (या भेजा) किया जा सकता है।

विभिन्न स्थानों से अद्यतन स्थिति से बचने और विशिष्ट कार्यों के लिए परिवर्तन करने के लिए एक केंद्रीकृत स्थान होने से, आपको कई लाभ मिलते हैं। सबसे महत्वपूर्ण उल्लेख करने के लिए नहीं:

आप जानते हैं कि राज्य में कोई भी परिवर्तन केवल एक ही स्थान पर होगा। यह डिबगिंग और परीक्षण पर एक बड़ा प्रभाव है।
आप जानते हैं कि यदि कोई निश्चित कार्रवाई भेजी जाती है, तो राज्य में ऑपरेशन हमेशा समान होता है। फिर, यह सीधे डिबगिंग और परीक्षण को प्रभावित करता है।

परिवर्तन साधारण सुविधाओं के साथ किए जाते हैं।

एक कार्रवाई के प्रेषण द्वारा शुरू किया गया एक ऑपरेशन एक सरल कार्य होगा जिसे रीड्यूक्स आर्किटेक्चर के ढांचे के भीतर रीड्यूसर कहा जाता है।

ये रिड्यूसर (याद रखें कि वे सरल कार्य हैं) एक कार्रवाई और एक राज्य प्राप्त करते हैं, जो भेजे गए कार्रवाई (आमतौर पर स्विच स्टेटमेंट के आधार पर) के आधार पर, वे ऑपरेशन करते हैं और एक नया राज्य ऑब्जेक्ट वापस करते हैं।

Redux एप्लिकेशन की स्थिति अपरिवर्तित है! इसलिए, जब कोई reducer किसी स्थिति में कुछ बदलता है, तो वह एक नई स्थिति ऑब्जेक्ट लौटाता है।

शुद्ध कार्यों का उपयोग करने के लाभों को अच्छी तरह से जाना जाता है, जैसे कि इस तथ्य को कि वे तुरंत परीक्षण कर सकते हैं यदि आप उसी तर्क को पारित करते हैं जो आपको परिणामस्वरूप मिलता है।

यह दृष्टिकोण हमें Redux / ngrx के विकास साधनों का उपयोग करके हमारे राज्य के विभिन्न उदाहरणों के बीच जाने की अनुमति देता है और यह देखता है कि उदाहरणों के बीच क्या बदल गया है और किसने इसे अन्य चीजों के बीच बदल दिया है। इस प्रकार, शुद्ध कार्यों का उपयोग करना और नए राज्य उदाहरणों को वापस करना भी डिबगिंग पर एक बड़ा प्रभाव डालता है।

लेकिन, मेरी राय में, मुख्य लाभ यह है कि हमारे घटकों के सभी इनपुट डेटा को राज्य के गुणों से बांधकर, हम परिवर्तन का पता लगाने की रणनीति को धक्का दे सकते हैं, और इससे एप्लिकेशन प्रदर्शन बढ़ जाएगा।

महान ... तो, NGRX का उपयोग करने के क्या लाभ हैं?

जब हमने Redux टेम्पलेट के सिद्धांतों के बारे में बात की, तो हमने उनमें से अधिकांश का उल्लेख किया। लेकिन चलो आवेदन में redux टेम्पलेट का उपयोग करने के सबसे महत्वपूर्ण लाभों पर ध्यान दें (मेरी राय में):

, , .
redux , .
, , , , ngrx rxjs, .
ngrx, .

…

NGRX, , . , , , . , .
. , - , , , , , , . () rxjs .
NGRX Google, , , Angular ngrx. - , , .

NGRX

इस प्रकार, यह आम तौर पर सहमत है कि राज्य प्रबंधन को बनाए रखना मुश्किल हो जाता है जब ngrx का उपयोग मध्यम / बड़ी परियोजनाओं में किया जाना चाहिए। कुछ और कट्टर लोग कुछ ऐसा कहेंगे जैसे "अगर आपके पास भाग्य है, तो आपके पास एनजीआरएक्स है।"

मैं इस बात से सहमत हूं कि जब आप महत्वपूर्ण राज्य और इस राज्य का उपयोग करने वाले कई घटक हैं, तो इसका उपयोग मध्यम या बड़ी परियोजनाओं में किया जाना चाहिए, लेकिन आपको यह ध्यान रखना चाहिए कि अंगुलर स्वयं कई राज्य प्रबंधन समाधान प्रदान करता है, और यदि आपके पास एक मजबूत है कोणीय विकास दल, तो शायद आपको ngrx के बारे में चिंता करने की आवश्यकता नहीं है।

उसी समय, मेरा मानना है कि एक मजबूत कोणीय विकास टीम भी समाधान में ngrx को शामिल करने का निर्णय ले सकती है, क्योंकि वे redux टेम्पलेट की पूरी शक्ति को जानते हैं, साथ ही साथ rxjs ऑपरेटरों द्वारा जोड़ी गई ताकत, और वे दोनों के साथ काम करने में सहज महसूस करते हैं ...

यदि आप एक सरल उत्तर की उम्मीद कर रहे थे। ngrx का उपयोग कब करना है, यह तय करने के लिए, आप इसे प्राप्त नहीं करेंगे और किसी को भी इस पर भरोसा नहीं करेंगे जो आपको यह जवाब आपके संगठन या समूह के बाहर देता है। निर्णय पेशेवरों और विपक्षों के अध्ययन, आपकी टीम को समझने और उनकी राय को ध्यान में रखने पर निर्भर करता है।

NGRX क्रियाएँ, गियरबॉक्स, चयनकर्ता, भंडारण और प्रभाव

ये ngrx स्ट्रीम के बेसिक बिल्डिंग ब्लॉक हैं। उनमें से प्रत्येक हमारे राज्य को बदलने और डेटा प्राप्त करने के लिए एक ऑपरेशन शुरू करने की प्रक्रिया का एक हिस्सा लेता है।

छवि में हम ngrx स्ट्रीम देखते हैं। आइए इसे समझाते हैं ...

. , , , .
…

«» () . — , NGRX Action. Action' ( GetUserName):

type (): , , . : '[User] Get User Login''.

payload ( ): , . , . .
, ( switch) , , .
...

— , : . ngrx , , , , , .
, - , . , - HTTP .
...

ngrx , ngrx.

Effects , - , , , , , .

, API.

, , (success, error ..), , ngrx.
, ( ), «-» ( , ).
. , ngrx , , .
...

, , , .

NGRX «» . , , .

. . «store» , .

...

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

वह एक एप्लीकेशन स्टेट होल्डर भी है।

उपयोग के उदाहरणों के साथ निरंतर लेख: "कोणीय: NGRX का उपयोग करने का एक उदाहरण । "

कोणीय: NGRX के लिए एक स्पष्ट परिचय