💌 🍈 👨🏿‍🔧 RxJS का उपयोग करके प्रतिक्रियाशील प्रोग्रामिंग की मूल बातें 🕵🏿 👶🏾 🍃

भाग 1. प्रतिक्रिया और प्रवाह

लेखों की यह श्रृंखला आरएक्सजेएस जैसे अद्भुत पुस्तकालय का उपयोग करते हुए जेएस में प्रतिक्रिया और इसके अनुप्रयोग पर केंद्रित है।

लेखों की श्रृंखला "RxJS का उपयोग करके प्रतिक्रियात्मक प्रोग्रामिंग के मूल तत्व":

यह लेख किसके लिए है : मूल रूप से, यहां मैं मूल बातों की व्याख्या करूंगा, इसलिए इस तकनीक में शुरुआती लोगों के लिए लेख मुख्य रूप से है। उसी समय, मुझे उम्मीद है कि अनुभवी डेवलपर्स खुद के लिए कुछ नया सीखने में सक्षम होंगे। समझने के लिए js (es5 / es6) के ज्ञान की आवश्यकता होगी।

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

प्रतिक्रियाशीलता क्या है?

यह प्रतीत होता है कि सामान्य शब्द का उत्तर खोजना मुश्किल है। संक्षेप में: प्रतिक्रियाशीलता किसी भी परिवर्तन का जवाब देने की क्षमता है। लेकिन हम किन बदलावों की बात कर रहे हैं? सबसे पहले, डेटा परिवर्तन के बारे में। एक उदाहरण पर विचार करें:

let a = 2; let b = 3; let sum = a + b; console.log(sum); // 5 a = 3; console.log(sum); // 5 -

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

 let a = 2; let b = 3; let sum = a + b; console.log(sum); // 5 a = 3; console.log(sum); // 6 -   sum

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

डेटा स्ट्रीम

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

 const input = document.querySelector('input'); //     const eventsArray = []; input.addEventListener('keyup', event => eventsArray.push(event) ); //      eventsArray

हम कीप ईवेंट को सुनते हैं और ईवेंट ऑब्जेक्ट को अपने एरे में रखते हैं। समय के साथ, हमारे सरणी में हजारों KeyboardEvent ऑब्जेक्ट हो सकते हैं। यह ध्यान देने योग्य है कि हमारे सरणी को समय के अनुसार क्रमबद्ध किया जाता है - बाद की घटनाओं का सूचकांक पहले वाले के सूचकांक से अधिक है। इस तरह की एक सरणी एक सरलीकृत डेटा प्रवाह मॉडल है। सरलीकृत क्यों? क्योंकि सरणी केवल डेटा संग्रहीत कर सकती है। हम सरणी को पुनरावृत्त भी कर सकते हैं और किसी तरह इसके तत्वों को संसाधित कर सकते हैं। लेकिन सरणी हमें यह नहीं बता सकती है कि इसमें एक नया तत्व जोड़ा गया है। यह पता लगाने के लिए कि क्या सरणी में नया डेटा जोड़ा गया है, हमें इसे फिर से पुनरावृत्त करना होगा।

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

नमूदार

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

 const observable = new Observable(observer => { observer.next(1); observer.next(2); observer.complete(); })

वेधशाला वर्ग के निर्माता को कॉल करके, हम एक नया धागा बनाते हैं। एक तर्क के रूप में, हमने कंस्ट्रक्टर को सदस्यता फ़ंक्शन दिया। सदस्यता फ़ंक्शन एक नियमित फ़ंक्शन है जो एक पर्यवेक्षक को एक पैरामीटर के रूप में लेता है। प्रेक्षक स्वयं एक ऐसी वस्तु है जिसके तीन तरीके हैं:

अगला - स्ट्रीम में एक नया मान फेंकता है
त्रुटि - एक त्रुटि को धारा में फेंकता है, जिसके बाद धारा समाप्त होती है
पूरा - धागा समाप्त करता है

इसलिए हमने एक ऐसा धागा बनाया जो दो मूल्यों को समाप्त करता है और समाप्त करता है।

अंशदान

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

 const observer = { next: value => console.log(value), // 1, 2 error: error => console.error(error), // complete: () => console.log("completed") // completed }; observable.subscribe(observer);

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

निश्चित रूप से, कई लोगों का सवाल है कि अगर हम फिर से धारा की सदस्यता लेंगे तो क्या होगा? सब कुछ समान होगा: स्ट्रीम फिर से पर्यवेक्षक और अंत तक दो मान पारित करेगा। हर बार सदस्यता विधि को कहा जाता है, एक सदस्यता फ़ंक्शन को बुलाया जाएगा, और इसके सभी कोड को फिर से निष्पादित किया जाएगा। इससे हम निष्कर्ष निकाल सकते हैं: चाहे हम कितनी भी बार धारा की सदस्यता लें, हमारे पर्यवेक्षकों को एक ही डेटा प्राप्त होगा।

सदस्यता रद्द

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

 const timer = new Observable(observer => { let counter = 0; //  setInterval(() => { observer.next(counter++); //          }, 1000); }); timer.subscribe({ next: console.log //    });

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

लॉन्च के बाद, हम प्रतिष्ठित लॉग देखेंगे जो हर सेकंड दिखाई देंगे। यदि आप चाहें, तो आप कई बार स्ट्रीम के लिए प्रयोग और सदस्यता ले सकते हैं। आप देखेंगे कि प्रत्येक थ्रेड को दूसरों के स्वतंत्र रूप से निष्पादित किया जाएगा।

यदि आप इसके बारे में सोचते हैं, तो हमारे धागे को पूरे एप्लिकेशन के जीवन भर में क्रियान्वित किया जाएगा, क्योंकि हमारे पास setInterval को रद्द करने का कोई तर्क नहीं है, और सदस्यता फ़ंक्शन में पूर्ण विधि के लिए कोई कॉल नहीं है। लेकिन क्या होगा अगर हमें धागे को समाप्त करने की आवश्यकता है?

वास्तव में, सब कुछ बहुत सरल है। यदि आप दस्तावेज़ीकरण को देखते हैं, तो आप देख सकते हैं कि सदस्यता विधि सदस्यता वस्तु लौटाती है। इस ऑब्जेक्ट में एक सदस्यता समाप्त विधि है। हम इसे कहते हैं, और हमारी पर्यवेक्षक धारा से मूल्यों को प्राप्त करना बंद कर देगी।

 const subscription = timer.subscribe({next: console.log}); setTimeout(() => subscription.unsubscribe(), 5000); //   5

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

 const timer = new Observable(observer => { let counter = 0; const intervalId = setInterval(() => { observer.next(counter++); }, 1000); return () => { clearInterval(intervalId); } });

अब हम राहत की सांस ले सकते हैं। अनसब्सक्राइब विधि को कॉल करने के बाद, हमारे अनसब्सक्राइब फ़ंक्शन को कॉल किया जाएगा, जो अंतराल को साफ करेगा।

निष्कर्ष

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

RxJS का उपयोग करके प्रतिक्रियाशील प्रोग्रामिंग की मूल बातें