👓 🚰 👩🏾‍🎤 NgRx बतख | गतिशील पहलू ☎️ 🛀🏼 🧙🏿

विकास के अनुभव में सुधार

विभिन्न कंपनियों के सहयोगियों के साथ बोलते हुए, मैंने देखा कि बहुत सारी टीमें NgRx को पसंद करती हैं। हमारी चर्चा के दौरान, विचार ने मुझे नहीं छोड़ा:

"कम कोड बनाए रखना अच्छा होगा, और बाद में स्केलिंग की सुविधा के लिए लेखन गाइड का पालन करें । "

इसने मुझे विभिन्न Redux रीफैक्टरिंग तकनीकों की खोज शुरू करने के लिए प्रेरित किया। मैंने एक वीडियो देखा, Redux लेख और दस्तावेज़ पढ़े। अंत में, मैंने NgRx के लिए एक प्लगइन लिखा जिसे NgRx Ducks कहा जाता है

लक्ष्यों

मूलतः, ngrx-ducks को NgRx के साथ काम करने के लिए सरल बनाया गया था ।

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

यह कैसे काम करता है?

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

NgRx डक लाइब्रेरी मौजूदा NgRx व्यवहार को संशोधित नहीं करती है। यह केवल अवलोकन योग्य भंडार और प्रेषण विधि को नियंत्रित करता है।

चूंकि NgRx डक पूरी तरह से प्रेषण पर निर्भर करता है और तथ्य यह है कि रिपॉजिटरी एक ऑब्जर्वेबल प्रदान करता है, NgRx डक NgRx के साथ संगत रहता है, भले ही रिलीज़ में महत्वपूर्ण परिवर्तन हों।

स्थापना

NgRx डक एक मौजूदा NgRx परियोजना के साथ मूल एकीकृत करता है। बस npm पैकेज स्थापित करें और आप जाने के लिए तैयार हैं।

npm install @co-it/ngrx-ducks #  yarn add @co-it/ngrx-ducks

डेकोरेटर एपीआई

एनजीआरएक्स डक का मुख्य विचार एक्शन टाइप और म्यूटेटर लॉजिक ( जिसे रेड्यूसर भी कहा जाता है ) को संयोजित करना है। इसलिए, @Ducksify डेकोरेटर को एक नियमित वर्ग को एनोटेट करने के लिए जोड़ा गया था।

 import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter {}

डेकोरेटर आपको अपने राज्य के शुरुआती स्टेट को निर्दिष्ट करने की अनुमति देता है। आरंभिक मार्ग गुजरने से NgRx डकस बाद में स्वचालित रूप से एक reducer फ़ंक्शन उत्पन्न करने की अनुमति देता है।

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

 import { Action, Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ /* ... */ }) export class Counter { @Action('[Counter] Increase by passed value') increaseBy(state: number, payload: number): number { return state + payload; } }

NgRx डक हर एक्शन को संबंधित म्यूटेशन लॉजिक के साथ मैप करता है। बतख में reducer फ़ंक्शन उत्पन्न करने के लिए सभी आवश्यक जानकारी होती है।

Reducer फ़ंक्शन

Reducer फ़ंक्शंस स्वचालित रूप से NgRx डक का उपयोग करके उत्पन्न होते हैं। ReducerFrom फैक्ट्री प्रत्येक एक्शन टाइप को उसके संबंधित म्यूटेशन लॉजिक में मैप करने के लिए लुकअप टेबल बनाती है।

 import { reducerFrom, DucksifiedAction, ... } from '@co-it/ngrx-ducks'; export function reducer( state: number, action: DucksifiedAction): number { return reducerFrom(Counter)(state, action); }

एओटी संकलक के साथ सही ढंग से काम करने के लिए आपको अभी भी निर्यात किए गए फ़ंक्शन के अंदर reducerFrom को लपेटने की आवश्यकता है।

उत्पन्न reducer को NgRx का उपयोग करके ActionReducerMap में जोड़ा जाना चाहिए ( नीचे उदाहरण देखें )।

बतख शक्ति!

सबसे दिलचस्प अभी तक आना बाकी है! वेयरहाउस के साथ सहभागिता को सरल बनाने के लिए NgRx डक का लक्ष्य है। Reducer फ़ंक्शन की स्वचालित पीढ़ी के साथ, सबकुछ ठीक है, और इसलिए आइए गतिशील मुखौटा पर एक नज़र डालें, जो यहां भी बनाया गया है।

@Ducksify डेकोरेटर भी अपने बतख को कोणीय IoC कंटेनर में एक सेवा के रूप में पंजीकृत करने का ख्याल रखता है। इसका मतलब है कि आप अपने घटक में बतख एम्बेड कर सकते हैं!

वॉल्ट एक्शन डिस्पैचिंग

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

 import { Duck } from '@co-it/ngrx-ducks'; @Component({ /* ... */ }) export class CounterComponent { constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.counter.incrementBy(42); } }

आप डक लागू करते हैं , काउंटर ही नहीं। डक स्वचालित रूप से इंक्रीमेंट के लिए एक एक्शन क्रिएटर बनाता है जो पारित मूल्य (पेलोड) के साथ एक्शन भेजता है। डायनामिक टाइपस्क्रिप्ट प्रकार के लिए धन्यवाद, आप तुरंत IDE में स्वतः पूर्ण हो जाते हैं।

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

संग्रहण से डेटा पुनर्प्राप्ति

डक स्टोरेज से डेटा पढ़ने के लिए NgRx चयनकर्ताओं का उपयोग करता है। प्रत्येक बतख में एक सहायक पिक है जो एक चयनकर्ता को स्वीकार करता है।

आइए कल्पना करें कि हमारा काउंटर कुंजी " काउंटर " के साथ एक NgRx फ़ंक्शन के रूप में पंजीकृत है। यह हमें निम्नलिखित चयनकर्ता सेटिंग की अनुमति देगा।

 import { createFeatureSelector, createSelector} from '@ngrx/store'; const visitCounter = createFeatureSelector<number>('counter'); const count = createFeatureSelector<number>(count => count); @Component({ /* ... */ }) export class CounterComponent { count$: Observable<number>;constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.count$ = this.counter.pick(count); this.counter.incrementBy(42); } }

आप stackblitz.io पर डेमो देख सकते हैं।

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

और अंत में

NgRx बतख भी प्रभाव के साथ मूल एकीकृत करता है! लेकिन हम इस बारे में विस्तार से अगले लेख में ही विश्लेषण करेंगे।

यदि आप अभी इसके बारे में जानने के लिए उत्सुक हैं, तो आप जटिल उदाहरण का उल्लेख कर सकते हैं, जो स्टैकब्लिट्ज़.आईओ पर भी उपलब्ध है ।

टीएल, डॉ

NgRx बतख NgRx के शीर्ष पर एक अतिरिक्त परत के रूप में काम करता है।
आप आसानी से मौजूदा परियोजनाओं में NgRx डक को एकीकृत कर सकते हैं।
बतख़
.... स्वचालित रूप से एक्शन क्रिएटर्स और रिड्यूसर कार्यों को उत्पन्न करता है
। ... कार्रवाई प्रगणकों और संघ प्रकार अनावश्यक बनाता है
.... यह एक गतिशील पहलू है जिसे एक घटक में एम्बेड किया जा सकता है
... गतिशील रूप से टाइप किए गए स्व-प्रेषण प्रदान करता है; क्षमा क्रिया
.... पिक-एपीआई का उपयोग करके संग्रहण से डेटा पढ़ने की अनुमति देता है
। ... प्रभाव द्वारा इस्तेमाल किया जा सकता है (देखें। डेमो )

वह सब लोग हैं!

मुझे आशा है कि मैं आपको NgRx बतख की कोशिश करने के लिए मनाने में कामयाब रहा। इसके अलावा, मुझे आश्चर्य है कि आप इस पुस्तकालय के बारे में क्या सोचते हैं। यदि आपके पास कोई विचार है, तो बस GitHub पर लिखें

NgRx बतख | गतिशील पहलू