React Native में कनेक्शन स्थिति को आसानी से ट्रैक करें और उपयोगकर्ताओं को सूचित करें

Jordy van den Aardweg द्वारा

हर बार मैं उन तकनीकों को बनाने और एक्सप्लोर करने के लिए समय निकालता हूं जिनके लिए मेरे पास एक फ्रीलांस फ्रंटएंड डेवलपर के रूप में अपने दैनिक जीवन में समय नहीं होता। हाल ही में, मैं React Native एक्सप्लोर कर रहा हूं और कुछ नए टूल्स और APIs में गोता लगा रहा हूं।

लेकिन एक नेटिव ऐप बनाना वेब ऐप बनाने से थोड़ा अलग है। हाल ही में मैं एक ऐसे परिदृश्य में आया जहां उपयोगकर्ता के पास कोई सक्रिय इंटरनेट कनेक्शन नहीं है।

हम उपयोगकर्ता को कैसे सूचित करेंगे कि हमारे ऐप में सीमित क्षमताएं हैं?

React Native में कनेक्शन स्थिति को आसानी से ट्रैक करें और उपयोगकर्ताओं को सूचित करें _Photo by [Unsplash](https://unsplash.com/photos/ZYecenZy7o4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Galen Crout on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=").

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

दूसरे शब्दों में, हम अपने उपयोगकर्ताओं को कुछ संदर्भ दे सकते हैं कि ऐप किसी विशेष रिक्वेस्ट को क्यों नहीं कर सकता।

Redux vs. Context API

React Native कम्युनिटी एक NetInfo मॉड्यूल प्रदान करती है जो उपयोगकर्ता के नेटवर्क कनेक्शन के बारे में जानकारी उजागर करता है, जैसे कि यह ऑनलाइन है या ऑफलाइन। हमें इस डेटा को अपने ऐप में वैश्विक रूप से उपलब्ध कराने की आवश्यकता है।

एक सामान्य विचार होगा कि इसके लिए Redux का उपयोग किया जाए। मेरा ऐप पहले से ही Redux का उपयोग करता है, तो क्यों न इसके लिए Redux का उपयोग किया जाए?

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

आइए अन्य संभावनाओं का पता लगाएं...

React का Context API हमारे कंपोनेंट्स के माध्यम से स्टेट-जैसे डेटा को साझा करने का एक सरल, स्वच्छ तरीका प्रदान करता है:

Context को ऐसे डेटा को साझा करने के लिए डिज़ाइन किया गया है जिसे React कंपोनेंट्स के एक ट्री के लिए "वैश्विक" माना जा सकता है, जैसे वर्तमान प्रमाणित उपयोगकर्ता, थीम, या पसंदीदा भाषा। — स्रोत

लगता है हमारे पास React के नए Context API का उपयोग करने के लिए एक आदर्श उपयोग का मामला है!

आइए गोता लगाएं

सबसे पहले, हमें आवश्यक पैकेज इंस्टॉल करने होंगे, क्योंकि React Native 0.59 में NetInfo मॉड्यूल एक अलग पैकेज में है। React 16.6 या बाद का वर्जन भी आवश्यक है क्योंकि यह कॉन्टेक्स्ट को रेंडर मेथड्स के बाहर उपलब्ध होने की अनुमति देता है। काफी उपयोगी, क्योंकि यह हमें अधिक लचीलापन देता है कि हम इस कॉन्टेक्स्ट का उपयोग कहां करते हैं।

मैं आपको React Native ऐप सेटअप करने से परेशान नहीं करूंगा और बस मान लूंगा कि आपके पास पहले से एक है।

आइए NetInfo पैकेज इंस्टॉल करें:

npm install @react-native-community/netinfo --save

एक बार इंस्टॉल हो जाने पर, हम अपने कंपोनेंट्स बना सकते हैं।

कॉन्टेक्स्ट प्रोवाइडर बनाना
आइए <NetworkProvider> कंपोनेंट सेट करें। यह कंपोनेंट हमारी कनेक्टिविटी स्थिति को हमारे सभी चाइल्ड कंपोनेंट्स तक पहुंचाता है:

ऊपर दिखाए अनुसार, हम केवल connectionChange इवेंट को सुनते हैं। वह इवेंट true लौटाता है जब एक सक्रिय इंटरनेट कनेक्शन होता है या false जब उपयोगकर्ता के पास कोई सक्रिय इंटरनेट कनेक्शन नहीं होता। जब कनेक्टिविटी स्थिति बदलती है तो हम स्टेट अपडेट करते हैं।

जैसे ही हम स्टेट अपडेट करते हैं, हमारे कंपोनेंट ट्री में कॉन्टेक्स्ट बदल जाता है। इसलिए हर कंपोनेंट को अपडेटेड isConnected मान तक पहुंच प्राप्त होती है। Redux के समान, लेकिन बहुत कम बॉयलरप्लेट कोड के साथ।

कॉन्टेक्स्ट प्रोवाइडर को लपेटना
React के Context API को काम करने के लिए, हमें इस <NetworkProvider> कंपोनेंट को लपेटने की आवश्यकता है जिसे हमने अभी बनाया है, हमारे अन्य कंपोनेंट्स के आसपास, जैसे:

ऐसा करके हम <NetworkProvider> के अंदर हर कंपोनेंट में context उपलब्ध कराते हैं।

अंतिम चरण एक कंपोनेंट में कॉन्टेक्स्ट का उपयोग करना है। हम अभी के लिए <ExampleComponent> का उपयोग करते हैं:

अब हमारा कंपोनेंट Context API का उपयोग करता है और this.context.isConnected हमारे उपयोग के लिए उपलब्ध है।

अब हम <ExampleComponent> में अपने उपयोगकर्ताओं को एक संदेश दिखा सकते हैं जब उपयोगकर्ता का इंटरनेट कनेक्शन ऑनलाइन या ऑफलाइन है।

React के पिछले वर्जन में, context आपके रेंडर मेथड के बाहर उपलब्ध नहीं था। React 16.6.0 के बाद से यह static contextType का उपयोग करके उपलब्ध है जैसा कि ऊपर उदाहरण में दिखाया गया है। इसका उपयोग इस तरह करने से हमें अपने कंपोनेंट्स के अंदर जहां हम उस कॉन्टेक्स्ट का उपयोग करना चाहते हैं, वहां अधिक लचीलापन मिलता है।

एक अंतिम नोट

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

हम Redux के साथ भी ऐसा ही कर सकते थे, लेकिन इसके लिए बहुत अधिक कोड की आवश्यकता होती है। जहां संभव हो नेटिव React APIs का उपयोग करें, क्योंकि यह निर्भरता को सीमित करता है!

पूरा Gist मेरे GitHub पर पाया जा सकता है।

पढ़ने के लिए धन्यवाद!

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

क्या इस ट्यूटोरियल ने आपकी मदद की? मुझे कमेंट्स में बताएं ?

मेरे लेखों को बेहतर बनाने के लिए फीडबैक मिला? मैं सुधार करने और अपने ज्ञान को अधिक साझा करने के लिए उत्सुक हूं।

मुफ्त में कोड करना सीखें। freeCodeCamp के ओपन सोर्स करिकुलम ने 40,000 से अधिक लोगों को डेवलपर के रूप में नौकरी पाने में मदद की है। शुरू करें