रिएक्ट राउटर में स्टोरेज से डेटा प्राप्त करना

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

इस पाठ में हम, शुरुआत के लिए, स्टोरेज से डेटा प्राप्त करने का तरीका समझेंगे। डेटा को स्थानीय रूप से संग्रहीत करने के लिए हम 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;
}

फंक्शन के कोड के बाद नीचे हम नेटवर्क विलंब (0.7 सेकंड तक) का अनुकरण करते हुए 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);
  });
}