🛁 👩🏾‍🍳 🏟️ कोणीय: NGRX का उपयोग करने का एक उदाहरण 🤳🏿 💋 ◽️

यह लेख "कोणीय: एनजीआरएक्स के लिए एक परिचयात्मक परिचय" पद की एक निरंतरता है ।

एनजीआरएक्स उदाहरण

हमारे उदाहरण में, उपयोगकर्ताओं की एक सूची होगी, एक उपयोगकर्ता विवरण पृष्ठ, और कुछ प्रारंभिक कॉन्फ़िगरेशन जानकारी जो आपको आवेदन शुरू करते समय प्राप्त होनी चाहिए। हम कुछ महत्वपूर्ण एनजीआरएक्स थ्रेड्स को लागू करने जा रहे हैं।

कार्य योजना:

पुस्तकालय स्थापना
भंडारण के लिए एक फ़ोल्डर संरचना बनाना
भंडारण और प्रारंभिक मूल्यों का निर्माण
क्रिया बनाना
गियरबॉक्स बनाना (रिड्यूसर)
प्रभाव पैदा करना
चयनकर्ता बनाना
अंतिम सेटअप
घटकों में भंडारण का उपयोग करना

तो ये करते है ...

पुस्तकालय स्थापना

हम प्रोजेक्ट बनाने के लिए एंगल क्ली का उपयोग करने जा रहे हैं, और फिर हम नेग्रक्स लाइब्रेरी जोड़ेंगे।

एक परियोजना बनाएँ:

ng new angular-ngrx --style=scss

आवश्यक NGRX लाइब्रेरी जोड़ें:

npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save

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

store-devtools - एक शक्तिशाली डिबगिंग टूल।
रूटर-स्टोर - भंडारण में कोणीय राउटर की स्थिति को बचाता है।

भंडारण के लिए फ़ोल्डर संरचना

चलो रिपॉजिटरी की फ़ाइल संरचना पर चर्चा करके शुरू करते हैं। यह फ़ाइल संरचना और संपूर्ण संग्रहण कॉन्फ़िगरेशन आपके एप्लिकेशन के मुख्य मॉड्यूल में मौजूद होना चाहिए, लेकिन हमारे उदाहरण में यह अनुपस्थित है, इसलिए हमारे एप्लिकेशन के मुख्य मॉड्यूल में भंडारण मौजूद होगा (यदि आप मुख्य मॉड्यूल में ऐसा करते हैं तो चरण लगभग समान हैं)।

फ़ोल्डर संरचना वास्तविक भंडारण संरचना का एक प्रतिनिधित्व है। आपके पास "स्टोर" और पाँच सबफ़ोल्डर नाम के साथ एक मुख्य फ़ोल्डर होगा जो स्टोर में प्रत्येक प्रमुख खिलाड़ियों का प्रतिनिधित्व करता है: "क्रियाएँ", "प्रभाव", "रीडर्स", "चयनकर्ता" और "राज्य"।

भंडारण और प्रारंभिक मूल्यों का निर्माण

जैसा कि हमने पहले उल्लेख किया है, हमारे पास दो मुख्य खंड होंगे: हमारा एप्लिकेशन, उपयोगकर्ता और कॉन्फ़िगरेशन। उन दोनों के लिए, हमें एक राज्य और एक प्रारंभिक राज्य बनाने की आवश्यकता है, और आवेदन की स्थिति के लिए भी ऐसा ही करना है।

हमने उपयोगकर्ता परिभाषा और कॉन्फ़िगरेशन के लिए दो इंटरफेस बनाए हैं। हमारे पास उपयोगकर्ता की HTTP प्रतिक्रिया के लिए भी एक है, यह सिर्फ एक IUser सरणी है।

उपयोगकर्ता राज्य (स्टोर / राज्य / user.state.ts) के साथ शुरू करते

हैं : हम यहां क्या कर रहे हैं:

हम एक उपयोगकर्ता पर्यावरण संरचना के साथ एक इंटरफ़ेस बनाते हैं और निर्यात करते हैं।
हम प्रारंभिक उपयोगकर्ता स्थिति के साथ ऐसा ही करते हैं, जो नए बनाए गए इंटरफ़ेस को लागू करता है।

कॉन्फ़िगरेशन स्थिति के लिए, हम वही करते हैं (स्टोर / स्टेट्स / config.state.ts):

अंत में, हमें एप्लिकेशन स्टेट (स्टोर / स्टेट्स / app.state.ts) जेनरेट करना होगा:

एप्लिकेशन स्थिति में उपयोगकर्ता स्थिति और कॉन्फ़िगरेशन, साथ ही राउटर की स्थिति शामिल होती है।
फिर हमने एप्लिकेशन की प्रारंभिक स्थिति सेट की।
अंत में, यह प्रारंभिक अवस्था प्राप्त करने के लिए फ़ंक्शन का निर्यात करता है (हम इसे बाद में उपयोग करेंगे)।

क्रिया बनाना

पिछले लेख में चर्चा की गई कार्रवाई की परिभाषा पढ़ना सुनिश्चित करें ।

हमें उपयोगकर्ताओं और सेटिंग्स के लिए क्रियाएं बनाने की आवश्यकता है। आइए उपयोगकर्ता क्रियाओं (स्टोर / एक्शन / user.actions.ts) से शुरू करें:

चलो कोड के माध्यम से चलते हैं:

Enum, . , , , .
. Action ngrx. , , , .
, , . , , , .

और यह सब ... कार्रवाई बनाना आसान है। आइए देखें कि कॉन्फ़िगरेशन क्रियाएं क्या दिखती हैं (स्टोर / एक्शन / config.actions.ts):

यहां कुछ भी नया नहीं है, आप शायद अब इस फाइल में होने वाली हर चीज के साथ सहज महसूस करते हैं।

महान, हम पहले से ही स्थिति और कार्यों को निर्धारित कर चुके हैं ... चलो गियर बनाएं!

गियरबॉक्स बनाना

गियरबॉक्स की परिभाषा को पढ़ना सुनिश्चित करें जिसे हमने पिछले लेख में चर्चा की थी ।

हमारे पास गियरबॉक्स होंगे जो कुछ कार्यों का जवाब देंगे, क्योंकि अन्य उन प्रभावों से निपटेंगे जो हम बाद में लागू करने जा रहे हैं।

हमें उपयोगकर्ताओं के लिए एक रिड्यूसर की आवश्यकता होगी और कॉन्फ़िगरेशन के लिए एक और, लेकिन हमें एप्लिकेशन रिड्यूसर भी जेनरेट करना होगा, आइए उपयोगकर्ता रिड्यूसर (स्टोर / रीडर्स / user.reducers.ts) को देखकर शुरू करें:

आइए कार्यान्वयन पर चर्चा करें:

एक reducer घोषणा एक राज्य प्राप्त करता है और, इस मामले में, एक उपयोगकर्ता कार्रवाई और एक IUserState देता है।
स्विच स्टेटमेंट का उपयोग करते हुए, हम प्रत्येक संभावित प्रकार की कार्रवाई के लिए अवलोकन उत्पन्न करते हैं।
प्रत्येक मामला एक नई वस्तु देता है, जो पुराने राज्य के विलय और नए मूल्य का परिणाम है।
सभी गियरबॉक्स में एक डिफ़ॉल्ट परिणाम होता है, जो बिना किसी परिवर्तन के बस वापस आ जाता है।

और यह सब है। आपको गियरबॉक्स में कुछ और नहीं मिलेगा। आइए कॉन्फ़िगरेशन रिड्यूसर (स्थिति / redurs / config.reducers.ts) पर एक नज़र डालते हैं:

अंत में, चलो एप्लिकेशन रिड्यूसर (स्टोर) पर नज़र डालते हैं:

यहां हम एप्लिकेशन के रिड्यूसर मैप में सभी रिड्यूसर जोड़ते हैं। हम अतिरिक्त प्रकार की जाँच के लिए एक एक्शन रिड्यूसर मैप का उपयोग करते हैं। बाद में हम स्टोर मॉड्यूल के लिए रिड्यूसर के साथ यह एप्लिकेशन प्रदान करने जा रहे हैं।

प्रभाव जोड़ें

"प्रभाव" की परिभाषा को पढ़ना सुनिश्चित करें, जिसकी चर्चा हमने पिछले लेख में की थी ।

आपने शायद पहले से ही ध्यान दिया है कि गियरबॉक्स में हम सभी कार्यों को संसाधित नहीं करते हैं। ऐसा इसलिए है क्योंकि हम प्रभावों में छूटी हुई क्रियाओं को संभालने जा रहे हैं, क्योंकि इन क्रियाओं के दुष्प्रभाव हैं।

चलो कस्टम प्रभाव (स्टोर / प्रभाव / user.effects.ts) के साथ शुरू करते हैं:

इस फ़ाइल में बहुत कुछ होता है। आइए उन्हें समझाने की कोशिश करें:

हम एक इंजेक्शन डेकोरेटर का उपयोग करके अपने कस्टम प्रभाव की घोषणा करते हैं।
हम ngrx / प्रभाव द्वारा प्रदान किए गए प्रभाव डेकोरेटर का उपयोग करके हमारे प्रभावों की घोषणा करते हैं।
Ngrx / प्रभाव द्वारा प्रदान किए गए कार्यों का उपयोग करते हुए, हम इस प्रभाव के लिए अपने ऑपरेटर की पाइपलाइन शुरू करने जा रहे हैं।
अगला कदम theType ऑपरेटर का उपयोग करके प्रभाव कार्रवाई के प्रकार को सेट करना है।
निम्नलिखित भाग rxjs ऑपरेटर हैं जिनका उपयोग हम उस चीज़ को प्राप्त करने के लिए करते हैं जिसकी हमें आवश्यकता है (हमारे पास इस लेख में पहले से ही rxjs प्रलेखन का एक लिंक है)।
अंत में, अंतिम विवरण में, प्रभाव एक और कार्रवाई भेजेगा।
कंस्ट्रक्टर में, हम उन सेवाओं को कार्यान्वित करते हैं जिनका हम उपयोग करने जा रहे हैं, ngrx / प्रभाव के लिए क्रियाएँ, और इस मामले में भी रिपॉजिटरी (ध्यान दें कि यह एक डेमो है, और हम अपने रिपॉजिटरी में उपयोगकर्ताओं की सूची से चयनित उपयोगकर्ता प्राप्त करते हैं)।

यह लगभग वही संरचना है जिसे आप किसी भी प्रभाव के साथ देखेंगे। इस मामले में, हम केवल एक सफल कार्रवाई भेजते हैं, लेकिन हम त्रुटियों या किसी अन्य राज्य को भेज सकते हैं जिसे हम अपने एप्लिकेशन रिड्यूसर में संसाधित करना चाहते हैं।

कॉन्फ़िगरेशन प्रभाव (स्टोर / प्रभाव / config.effects.ts) पर विचार करें:

अब चयनकर्ताओं के बारे में बात करने का समय है ...

, .

यह हमारे राज्य के स्लाइस को हर जगह दोहराने के लिए कोई मतलब नहीं है, तो चलो कुछ चयनकर्ताओं को बनाएं जिन्हें हम पुन: उपयोग कर सकते हैं।

हमेशा की तरह, आइए पहले उपयोगकर्ता चयनकर्ताओं (स्टोर / चयनकर्ताओं / user.selectors.ts) को देखें:

यह वास्तव में समझ में आता है क्योंकि हम अपने चयनकर्ताओं में कोई डेटा परिवर्तन नहीं करते हैं, लेकिन केवल फ़ंक्शन का उपयोग करके चयनकर्ता द्वारा संदर्भित स्टोर का टुकड़ा वापस करते हैं। ngrx / store से createSelector।

पहला पैरामीटर स्टोरेज का एक टुकड़ा है जो डेटा प्राप्त करने के लिए उपयोग किया जाएगा (यह राज्य के कई हिस्सों के साथ एक सरणी हो सकता है), दूसरा पैरामीटर एक अनाम फ़ंक्शन है जो यह तय करेगा कि चयनकर्ता क्या लौटेगा।

आइए कॉन्फ़िगरेशन चयनकर्ताओं (स्टोर / चयनकर्ताओं / config.selectors.ts) को देखें:

अंतिम सेटअप

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

आइए एक एप्लिकेशन मॉड्यूल जोड़ें:

हमने यहां क्या किया है:

हम अपने गियरबॉक्स को आयात करते हैं और उन्हें forRoot स्टोरेज मॉड्यूल में प्रदान करते हैं।
हम अपने प्रभावों को आयात करते हैं और उन्हें फॉरेस्ट इफेक्ट मॉड्यूल में सरणी के अंदर प्रदान करते हैं।
हम राउटर के राज्य मॉड्यूल के लिए कॉन्फ़िगरेशन सेट करते हैं जो स्टेटके राउटर प्रदान करता है।
और हम स्टोर डेवलपर टूल जोड़ते हैं यदि पर्यावरण उत्पादन नहीं है।

पहले दो चरण आवश्यक हैं, जबकि चरण 3 और 4 मैं अत्यधिक अनुशंसा करता हूं, लेकिन वे आवश्यक नहीं हैं।

अब हमने आखिरकार ... हम अपने भंडारण का उपयोग घटकों में कर सकते हैं!

कुछ घटकों में भंडारण उपयोग

हम अंत के करीब हैं! आइए देखें कि हमारे भंडारण का उपयोग कैसे करें ...

सबसे पहले, आवेदन शुरू होने पर कॉन्फ़िगरेशन प्राप्त करें:

हम अपने app.component में स्टोरेज जोड़ रहे हैं।
हम कॉन्फ़िगरेशन में चयनकर्ता के मान के लिए घटक गुण सेट करते हैं, क्योंकि हम इस जानकारी को HTML में प्रदर्शित करना चाहते हैं।
OnInit पर, हम कॉन्फ़िगरेशन प्राप्त करने के लिए कार्रवाई सबमिट करते हैं।

यह सब ... हम पहले से ही एक प्रभाव को कोडित कर रहे हैं जो इस क्रिया को नियंत्रित करेगा, और एक reducer जो इस प्रभाव को संभाल लेगा। जैसे ही स्टोर एक नए राज्य में प्रवेश करता है, चयनकर्ता हमारी संपत्ति के मूल्य को बदल देगा।

इसे HTML के साथ कैसे जोड़ा जाए:

जैसे ही config $ का मूल्य होता है, हम इसे HTML में देखेंगे।

अब देखते हैं कि उपयोगकर्ताओं की सूची (कंटेनरों / उपयोगकर्ताओं / users.component.ts):

जैसे ही हम कॉन्फ़िगरेशन का प्रबंधन करते हैं, हम उपयोगकर्ताओं की एक सूची प्राप्त करने जा रहे हैं। सबसे पहले, हम रिपॉजिटरी को उपयोगकर्ता घटक में इंजेक्ट करते हैं।
OnInit पर, हम उपयोगकर्ताओं को प्राप्त करने के लिए एक क्रिया पोस्ट करते हैं।
हम घटक के लिए एक संपत्ति बनाते हैं और इसे उपयोगकर्ता सूची चयनकर्ता का उपयोग करके उपयोगकर्ताओं की एक सूची प्रदान करते हैं।

HTML इस तरह दिखता है:

हम प्रस्तुति घटक में उपयोगकर्ताओं की सूची प्रदर्शित करते हैं, सूची भेजते हैं और चयनित उपयोगकर्ता को नेविगेशन फ़ंक्शन के साथ जोड़ते हैं, जिसे ऊपर उपयोगकर्ता कंटेनर घटक में देखा जा सकता है।

आइए कस्टम कंटेनर घटक को देखें:

यह घटक सक्रिय मार्ग से पैरामीटर पहचानकर्ता को प्राप्त करता है, और आप शायद बाकी से पहले से ही परिचित हैं, पैरामीटर के रूप में पहचानकर्ता को भेजता है, चयनित उपयोगकर्ता का चयन करता है ...

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

निष्कर्ष

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

मुझे वास्तव में उम्मीद है कि लेख आपको एक्शन टेम्प्लेट को समझने में मदद करेगा और अनुशंसा करेगा कि आप इसे डाउनलोड करें और कोड के साथ थोड़ा खेलें।

कोणीय: NGRX का उपयोग करने का एक उदाहरण