<पी> जोर्डी वैन डेन आर्डवेग द्वारा <पी> समय-समय पर मैं उन तकनीकों का निर्माण और अन्वेषण करना पसंद करता हूं जिनके लिए एक फ्रीलांस फ्रंटएंड डेवलपर के रूप में मेरे दैनिक जीवन में मेरे पास समय नहीं है। हाल ही में, मैं रिएक्ट नेटिव की खोज कर रहा हूं और कुछ नए टूल और एपीआई में गोता लगा रहा हूं। <पी> लेकिन एक नेटिव ऐप बनाना वेब ऐप बनाने से थोड़ा अलग है। मैं हाल ही में एक ऐसे परिदृश्य में आया जहां उपयोगकर्ता के पास कोई सक्रिय इंटरनेट कनेक्शन नहीं है। <पी> फिर हम उपयोगकर्ता को कैसे सूचित करेंगे कि हमारे ऐप की क्षमताएं सीमित हैं? <पी> _फ़ोटो द्वारा [अनस्प्लैश](https://unsplash.com/photos/ZYecenZy7o4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel=”noopener” target=”_blank” title=””>गैलेन क्राउट blank” title=”) <पी> जब आप नेटवर्क कनेक्टिविटी की आवश्यकता वाला ऐप बना रहे हैं, तो आपको विफल अनुरोधों के उचित प्रबंधन की आवश्यकता होती है। उदाहरण के लिए, जब उपयोगकर्ता का इंटरनेट कनेक्शन लुका-छिपी खेलने का निर्णय लेता है। इसलिए हमारा ऐप उपयोगकर्ता को सूचित कर सकता है कि अनुरोध विफल क्यों होता है या अनुरोध को सक्रिय होने से भी रोक सकता है। और इससे भी बेहतर:हमारे उपयोगकर्ता को एक उपयोगी संदेश दिखाएं जिसमें बताया जाए कि क्या हो रहा है, ताकि वे उस पर कार्रवाई कर सकें। <पी> दूसरे शब्दों में, हम कुछ संदर्भ दे सकते हैं हमारे उपयोगकर्ताओं को यह बताना कि ऐप एक निश्चित अनुरोध क्यों नहीं कर सकता। Redux बनाम कॉन्टेक्स्ट एपीआई
<पी> रिएक्ट नेटिव समुदाय उपयोगकर्ता के नेटवर्क कनेक्शन के बारे में जानकारी प्रदर्शित करने के लिए एक नेटइन्फो मॉड्यूल प्रदान करता है, जैसे कि यह ऑनलाइन या ऑफलाइन है। हमें इस डेटा को हमारे ऐप में विश्व स्तर पर उपलब्ध कराने की आवश्यकता है। <पी> एक सामान्य विचार यह होगा कि इसके लिए Redux का उपयोग किया जाए। मेरा ऐप पहले से ही Redux का उपयोग करता है, तो इसके लिए Redux का उपयोग क्यों न करें? <पी> खैर, निःसंदेह, हम कर सकते थे। लेकिन यदि हम इस कनेक्टिविटी जानकारी का उपयोग करना चाहते हैं तो इसके लिए प्रत्येक घटक को Redux स्टोर से जोड़ना आवश्यक है। Redux से जुड़ने से ओवरहेड, कोड की अधिक पंक्तियाँ बनती हैं और यह हमारे ऐप को आवश्यकता से अधिक जटिल बना सकता है। <पी> आइए अन्य संभावनाएं तलाशें… <पी> रिएक्ट का कॉन्टेक्स्ट एपीआई सरल प्रदान करता है , क्लीनर हमारे घटकों के माध्यम से राज्य जैसा डेटा साझा करने का तरीका: <पी> संदर्भ को उस डेटा को साझा करने के लिए डिज़ाइन किया गया है जिसे रिएक्ट घटकों के पेड़ के लिए "वैश्विक" माना जा सकता है, जैसे कि वर्तमान प्रमाणित उपयोगकर्ता, थीम या पसंदीदा भाषा। — स्रोत <पी> ऐसा लगता है जैसे हमारे पास रिएक्ट के नए कॉन्टेक्स्ट एपीआई का उपयोग करने के लिए एक आदर्श उपयोग मामला है!आइए गोता लगाएँ
<पी> सबसे पहले, हमें आवश्यक पैकेज स्थापित करना होगा, क्योंकि रिएक्ट नेटिव 0.59 मेंNetInfo मॉड्यूल एक अलग पैकेज में है. रिएक्ट 16.6 या बाद का संस्करण भी आवश्यक है क्योंकि यह संदर्भ को रेंडर विधियों के बाहर उपलब्ध होने की अनुमति देता है। काफी उपयोगी है, क्योंकि इससे जहां हम इस संदर्भ का उपयोग करते हैं वहां हमें अधिक लचीलापन मिलता है। <पी> मैं आपको रिएक्ट नेटिव ऐप सेट करने में परेशान नहीं करूंगा और मान लूंगा कि आपके पास पहले से ही एक है। <पी> आइए NetInfo इंस्टॉल करें पैकेज: npm install @react-native-community/netinfo --save
आइए
<NetworkProvide सेट करें आर> घटक। यह घटक हमारी कनेक्टिविटी स्थिति को हमारे सभी चाइल्ड घटकों तक पहुंचाता है: <पी> जैसा कि ऊपर दिखाया गया है, हम केवल connectionChange सुनते हैं घटना. वह ईवेंट true लौटाता है जब कोई सक्रिय इंटरनेट कनेक्शन हो या false जब उपयोगकर्ता के पास कोई सक्रिय इंटरनेट कनेक्शन न हो. कनेक्टिविटी स्थिति बदलने पर हम स्थिति को अपडेट करते हैं। <पी> जैसे ही हम स्थिति को अद्यतन करते हैं, हमारे घटक वृक्ष में संदर्भ बदल जाता है। इसलिए प्रत्येक घटक के पास अद्यतन isConnected तक पहुंच है मूल्य. Redux के समान, लेकिन बहुत कम बॉयलरप्लेट कोड के साथ। <पी> संदर्भ प्रदाता को लपेटना रिएक्ट के कॉन्टेक्स्ट एपीआई को काम करने के लिए, हमें इसे
<NetworkProvide लपेटना होगा r> घटक हमने अभी-अभी अपने अन्य घटकों के आसपास बनाया है, जैसे: <पी> ऐसा करके हम context बनाते हैं <NetworkProvid के अंदर प्रत्येक घटक में उपलब्ध है एर>. <पी> अंतिम चरण किसी घटक में संदर्भ का उपयोग करना है। हम <ExampleCompone का उपयोग करते हैं nt> अभी के लिए: <पी> अब हमारा घटक कॉन्टेक्स्ट एपीआई और this.context.isConnected का उपयोग करता है हमारे उपयोग के लिए उपलब्ध है। <पी> अब हम अपने उपयोगकर्ताओं को <ExampleCompone में एक संदेश दिखा सकते हैं nt> जब उपयोगकर्ता का इंटरनेट कनेक्शन ऑनलाइन या ऑफलाइन हो। <पी> रिएक्ट के पिछले संस्करणों में, context आपके रेंडर विधि के बाहर उपलब्ध नहीं था। रिएक्ट 16.6.0 के बाद से यह static contextType का उपयोग करके उपलब्ध है जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है। इस तरह इसका उपयोग करने से हमें उस संदर्भ में अधिक लचीलापन मिलता है जहां हम अपने घटकों के अंदर उस संदर्भ का उपयोग करना चाहते हैं। 
