React Router-এ স্টোরেজ থেকে ডেটা পাওয়া

আপনি দেখতে পাচ্ছেন যে এখনও পর্যন্ত আমাদের অ্যাপ্লিকেশনটি স্ট্যাটিক। এই এবং পরবর্তী পাঠগুলিতে আমরা এটিকে জীবন্ত করা শুরু করব। ইতিমধ্যে আসন্ন পাঠগুলিতে, আমরা React Router ব্যবহার করে পণ্য তালিকায় যোগ করতে সক্ষম হব।

এই পাঠে, আমরা শুরু করব স্টোরেজ থেকে ডেটা পাওয়ার মাধ্যমে। স্থানীয়ভাবে ডেটা সংরক্ষণের জন্য আমরা localForage স্টোরেজ ব্যবহার করব (আপনি এর ব্যবহার এবং সুবিধাগুলি ডকুমেন্টেশন-এ পড়তে পারেন) - LocalStorage-এর একটি অ্যানালগ, যা সমস্ত আধুনিক ব্রাউজার সমর্থন করে। আসলে এটি বিভিন্ন স্টোরেজ প্রযুক্তির একটি সমন্বয়। অপেক্ষাকৃত হালকা ব্যবহারের সাথে, এটি বড় পরিমাণে ডেটা সংরক্ষণ করতে দেয়, এবং বিভিন্ন ধরনের, এমনকি ছবিও। আসুন এটিকে আমাদের প্রকল্পে ইনস্টল করি। টার্মিনালে টাইপ করুন:

terminalnpm i localforage

আসুন আমাদের অ্যাপ্লিকেশনটি পুনরায় চালু করি। src ফোল্ডারে আমরা forStorage.js ফাইল তৈরি করব, যেখানে স্টোরেজের সাথে কাজ করার জন্য ফাংশনগুলি থাকবে।

সুতরাং, স্টোরেজ থেকে পণ্য লোড করার ফাংশন দিয়ে শুরু করা যাক। forStorage.js-তে লাইব্রেরি ইম্পোর্ট যোগ করি এবং পণ্য পাওয়ার জন্য getProducts ফাংশন লিখি:

forStorage.jsimport localforage from 'localforage';

export async function getProducts() {
  await someNetwork();
  let products = await localforage.getItem('products');
  if (!products) products = [];
  return products;
}

ফাংশনের কোডের নীচে আমরা someNetwork-এর জন্য কোডও যোগ করব, নেটওয়ার্ক বিলম্ব (০.৭ সেকেন্ড পর্যন্ত) অনুকরণ করার জন্য ফাংশনগুলির স্বাভাবিক কাজের জন্য। যদি আমাদের পণ্য "ক্যাশে করা" থাকে, তবে স্টোরেজের সাথে কাজ করার ফাংশনগুলিতে কোন বিলম্ব হবে না, যদি না থাকে, তবে বিলম্ব হবে, আপনি পরে দেখতে পাবেন, এটি কীভাবে কাজ করে:

forStorage.jslet someCache = {};

async function someNetwork(key) {
  if (!key) {
    someCache = {};
  }

  if (someCache[key]) {
    return;
  }

  someCache[key] = true;

  return new Promise((res) => {
    setTimeout(res, Math.random() * 700);
  });
}