রिअ্যাক্ট নেটিভে ইন্টারনেট কানেকশন স্ট্যাটাস সহজে ট্র্যাক এবং ব্যবহারকারীদের জানানো

লেখক: জর্ডি ভান ডেন ஆரডভেগ

প্রতিটি কিছুক্ষণ পরপর আমি তাদের টেকনোলজি তৈরি ও এক্সপ্লোর করতে পছন্দ করি যেগুলোর জন্য আমার দৈনন্দিন জীবনে ফ্রিল্যান্স ফ্রন্টএন্ড ডেভেলপার হিসেবে সময় নেই। gầnামূলক, আমি রিঅ্যাক্ট নেটিভ এক্সপ্লোর করছি এবং কিছু নতুন টুল ও API-তে ডুবে যাচ্ছি।

কিন্তু একটি নেটিভ অ্যাপ বিল্ড করা একটি ওয়েব অ্যাপ বিল্ড করার থেকে কিছুটা আলাদা। gầnামূলক আমি এমন একটি পরিস্থিতিতে পড়েছিলাম যেখানে ব্যবহারকারীর কোনো এক্টিভ ইন্টারনেট কানেকশন নেই।

তখন আমরা কীভাবে ব্যবহারকারীদের জানাব যে আমাদের অ্যাপের সীমিত ক্ষমতা আছে?

_ফটো: [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

রিঅ্যাক্ট নেটিভ কমিউনিটি একটি NetInfo মডিউল প্রদান করে যা ব্যবহারকারীর নেটওয়ার্ক কানেকশনের তথ্য এক্সপোজ করে, যেমন এটি অনলাইন কিনা বা অফলাইন। এই ডেটা আমাদের অ্যাপে গ্লোবালি উপলব্ধ থাকতে হবে।

একটি সাধারণ চিন্তা হবে Redux ব্যবহার করা। আমার অ্যাপ ইতিমধ্যে Redux ব্যবহার করে, তাহলে কেন না সেটি এই কাজের জন্যও ব্যবহার করি?

হ্যাঁ, অবশ্যই আমরা করতে পারি। কিন্তু এতে প্রতিটি কম্পোনেন্টকে Redux স্টোরের সাথে হুক করতে হবে যদি আমরা এই কানেক্টিভিটি ইনফরমেশন ব্যবহার করতে চাই। Redux-এ হুক করা ওভারহেড সৃষ্টি করে, আরও কোড লাগে এবং আমাদের অ্যাপকে প্রয়োজনের চেয়ে বেশি জটিল করতে পারে।

চলুন অন্য সম্ভাবনা এক্সপ্লোর করি…

React-এর Context API একটি সহজ, পরিষ্কার উপায় প্রদান করে স্টেট-লাইক ডেটা আমাদের কম্পোনেন্ট ট্রি entière-এ শেয়ার করার জন্য:

Context হলো এমন ডেটা শেয়ার করার জন্য ডিজাইন করা যা একটি React কম্পোনেন্ট ট্রির জন্য "গ্লোবাল" বিবেচিত হতে পারে, যেমন বর্তমান অথেন্টিকেটেড ইউজার, থিম, বা পছন্দের ভাষা। — উত্স

লাগছে আমাদের কাছে Context API ব্যবহার করার জন্য একটি পারফেক্ট ইউজ কেস!

চলুন ডুবে যাই

প্রথমে, আমাদের প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে, কারণ React Native 0.59-এ NetInfo মডিউল একটি আলাদা প্যাকেজে রয়েছে। React 16.6 বা পরবর্তী ভার্সনও প্রয়োজন কারণ এটি কন্টেক্সটকে রেন্ডার মেথডের বাইরে উপলব্ধ করতে দেয়। খুবই উপকারী, কারণ এটি আমাদের আরও ফ্লেক্সিবিলিটি দেয় কন্টেক্সটটি আমাদের কম্পোনেন্টে কোথায় ব্যবহার করব।

আমি রিঅ্যাক্ট নেটিভ অ্যাপ সেট আপ করার ব্যাপারে আপনাকে বাধা দেব না এবং ধরে নিচ্ছি আপনার কাছে ইতিমধ্যে একটি আছে।

চলুন NetInfo প্যাকেজটি ইনস্টল করি:

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

ইনস্টল হলে, আমরা আমাদের কম্পোনেন্টগুলো তৈরি করতে পারি।

কন্টেক্সট প্রোভাইডার তৈরি করা
চলুন <NetworkProvider> কম্পোনেন্টটি সেট আপ করি। এই কম্পোনেন্ট আমাদের কানেক্টিভিটি স্ট্যাটাস সারা চাইল্ড কম্পোনেন্টে পাস করবে:

উপরোক্তanusারে, আমরা শুধু connectionChange ইভেন্টটি শুনি। সেই ইভেন্টটি true রিটার্ন করে যখন একটি এক্টিভ ইন্টারনেট কানেকশন থাকে অথবা false রিটার্ন করে যখন ব্যবহারকারীর কোনো এক্টিভ ইন্টারনেট কানেকশন নেই। কানেক্টিভিটি স্ট্যাটাস পরিবর্তন হলে আমরা স্টেট আপডেট করি।

য_{{য}}apar সাথে স্টেট আপডেট হলে, আমাদের কম্পোনেন্ট ট্রিতে কন্টেক্সট পরিবর্তন হয়। তাই প্রতিটি কম্পোনেন্টকে আপডেট হওয়া isConnected ভ্যালুতে অ্যাক্সেস থাকে। Redux-এর মতো, কিন্তু অনেক কম বয়লারপ্লেট কোডের সাথে।

কন্টেক্সট প্রোভাইডার র‍্যাপ করা
React-এর Context API কাজ করার জন্য, আমাদের একדת তৈরি করা <NetworkProvider> কম্পোনেন্টটি আমাদের অন্যান্য কম্পোনেন্টের চারদিকে র‍্যাপ করতে হবে, এমনভাবে:

এটি করলে context <NetworkProvider>-এর ভিতরে থাকা প্রতিটি কম্পোনেন্টে উপলব্ধ হয়।

শেষ ধাপ হলো একটি কম্পোনেন্টে কন্টেক্সট ব্যবহার করা। আমরা এখন <ExampleComponent> ব্যবহার করব:

এখন আমাদের কম্পোনেন্ট Context API ব্যবহার করছে এবং this.context.isConnected আমাদের ব্যবহারের জন্য উপলব্ধ।

আমরা এখন <ExampleComponent>-এ ব্যবহারকারীদের একটি মেসেজ দেখাতে পারি যখন ব্যবহারকারীর ইন্টারনেট কানেকশন অনলাইন বা অফলাইন থাকে।

React-এর পুরনো ভার্সনে, context আপনার রেন্ডার মেথডের বাইরে উপলব্ধ নয়। React 16.6.0 থেকে এটি static contextType ব্যবহার করে উপলব্ধ, যেমন উপরের উদাহরণে দেখানো হয়েছে। এভাবে ব্যবহার করলে আমাদের কম্পোনেন্টের ভিতরে কোথায় কন্টেক্সট ব্যবহার করব সেটির জন্য আরও ফ্লেক্সিবিলিটি মি঳ে।

একটি চূড়ান্ত টিপ্পণি

তাহলে, আমরা দেখিয়েছি যে এই ইউজ কেসে গ্লোবাল ভ্যালু সেট এবং ব্যবহার করার জন্য Context API পারফেক্ট। কানেক্টিভিটি স্ট্যাটাস আমাদের পুরো অ্যাপে উপলব্ধ থাকা গুরুত্বপূর্ণ, যাতে আমরা ব্যবহারকারীদের জানাতে পারি যখন একটি এক্টিভ ইন্টারনেট কানেকশন প্রয়োজন এমন একটি অ্যাকশন ফেল করবে।

আমরা Redux-ও দিয়ে একই কাজ করতে পারতাম, কিন্তু তার জন্য অনেক বেশি কোড লাগত। সম্ভব হলে নেটিভ React API ব্যবহার করুন, কারণ এটি ডিপেন্ডেন্সি লিমিট করে!

সম্পূর্ণ Gist আমার GitHub-এ পাওয়া যাবে।

পড়ার জন্য ধন্যবাদ!

আমি কিছু বছর ধরে Medium ব্যবহার করছি, কিন্তু সাধারণত শুধু অন্যের কন্টেন্ট পড়ে শিখতাম। আপনার মত টিউটোরিয়ালগুলো سالদীর্ঘ আমাকে অনেক সাহায্য করেছে। তাই, নিজের লিখা টিউটোরিয়াল আমার এই অসাধারণ ডেভেলপার কমিউনিটির কাছে ফেরত দেয়ার উপায়!

এই টিউটোরিয়াল আপনাকে সাহায্য করেছে কি? কমেন্টে জানাতে ভুলবেন না ?

আমার আর্টিকেল উন্নত করার জন্য ফিডব্যাক দেন? আমি উন্নতি এবং আমার জ্ঞান আরও শেয়ার করতে আগ্রহী।

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started