রিঅ্যাক্ট নেটিভ-এ সংযোগ স্থিতি সম্পর্কে ব্যবহারকারীদের সহজেই ট্র্যাক করুন এবং অবহিত করুন

আসুন ডুব দেওয়া যাক

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

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

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

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

একবার ইনস্টল হয়ে গেলে, আমরা আমাদের উপাদান তৈরি করতে পারি।

প্রসঙ্গ সরবরাহকারী তৈরি করা হচ্ছে
চলুন <NetworkProvide সেট আপ করি r> উপাদান। এই কম্পোনেন্টটি আমাদের কানেক্টিভিটি স্ট্যাটাসকে আমাদের সমস্ত চাইল্ড কম্পোনেন্টের নিচে পাস করে:

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

আমরা স্টেট আপডেট করার সাথে সাথে আমাদের কম্পোনেন্ট ট্রির প্রেক্ষাপট পরিবর্তিত হয়। তাই প্রতিটি উপাদানের আপডেট করা isConnected অ্যাক্সেস আছে মান Redux এর মত, কিন্তু কম বয়লারপ্লেট কোড সহ।

প্রসঙ্গ সরবরাহকারীকে মোড়ানো৷
React এর প্রসঙ্গ API কাজ করার জন্য, আমাদের এই <NetworkProvideটি মোড়ানো দরকার r> কম্পোনেন্ট আমরা আমাদের অন্যান্য উপাদানের চারপাশে তৈরি করেছি, যেমন:

এটি করার মাধ্যমে আমরা context তৈরি করি <NetworkProvid-এর ভিতরে প্রতিটি উপাদানে উপলব্ধ er>।

শেষ ধাপ হল একটি উপাদানে প্রসঙ্গ ব্যবহার করা। আমরা একটি <ExampleCompone ব্যবহার করি nt> আপাতত:

এখন আমাদের উপাদান প্রসঙ্গ API এবং this.context.isConnected ব্যবহার করে আমাদের ব্যবহারের জন্য উপলব্ধ৷

আমরা এখন <ExampleCompone-এ আমাদের ব্যবহারকারীদের একটি বার্তা দেখাতে পারি nt> যখন ব্যবহারকারীর ইন্টারনেট সংযোগ অনলাইন বা অফলাইনে থাকে।

প্রতিক্রিয়ার পূর্ববর্তী সংস্করণগুলিতে, context আপনার রেন্ডার পদ্ধতির বাইরে উপলব্ধ ছিল না। প্রতিক্রিয়া 16.6.0 থেকে এটি static contextType ব্যবহার করে উপলব্ধ উপরের উদাহরণে দেখানো হয়েছে। এটিকে এভাবে ব্যবহার করা আমাদেরকে আরও নমনীয়তা দেয় যেখানে আমরা সেই প্রসঙ্গটি আমাদের উপাদানগুলির মধ্যে ব্যবহার করতে চাই৷

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

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

আমরা Redux এর সাথে একই কাজ করতে পারি, তবে এর জন্য আরও কোড প্রয়োজন। আসুন যেখানে সম্ভব নেটিভ রিঅ্যাক্ট এপিআই ব্যবহার করি, কারণ এটি নির্ভরতা সীমিত করে!

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

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

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

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

আমার নিবন্ধগুলি উন্নত করার জন্য আমার প্রতিক্রিয়া পেয়েছেন? আমি আমার জ্ঞানের আরও উন্নতি করতে এবং শেয়ার করতে আগ্রহী।

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন