React Router တွင် သိုလှောင်ရာမှ အချက်အလက်များ ရယူခြင်း

ကျွန်ုပ်တို့၏ application သည် လောလောဆယ် static ဖြစ်နေသည်ကို သင်မြင်တွေ့ရပါမည်။ ဤသင်ခန်းစာနှင့် နောက်ပိုင်း သင်ခန်းစာများတွင် ၎င်းကို အသက်ဝင်လာစေရန် စတင်ပါမည်။ ချဉ်းကပ်လာမည့် သင်ခန်းစာများတွင်ပင် React Router ကိုအသုံးပြု၍ ထုတ်ကုန်များကို စာရင်းထဲသို့ ထည့်သွင်းနိုင်မည် ဖြစ်သည်။

ဤသင်ခန်းစာတွင် အစပိုင်း၌ သိုလှောင်ရာမှ အချက်အလက်များ ရယူခြင်းကို စတင် ဆွေးနွေးပါမည်။ ဒေသတွင်း အချက်အလက်သိမ်းဆည်းရန် localForage သိုလှောင်ရာကို အသုံးပြုပါမည် (၎င်း၏အသုံးပြုပုံနှင့် အားသာချက်များကို အသေးစိတ်လမ်းညွှန် တွင် ဖတ်ရှုနိုင်ပါသည်) - LocalStorage ၏ ညီမျှသော အရာဖြစ်ပြီး ခေတ်သစ် browser အားလုံးက ပံ့ပိုးပေးထားသည်။ လက်တွေ့တွင် ၎င်းသည် သိုလှောင်ရာ နည်းပညာအမျိုးမျိုး၏ ပေါင်းစပ်မှုတစ်ခု ဖြစ်သည်။ nသုံးစွဲရန် အတော်အတန် လွယ်ကူသော်လည်း ၎င်းသည် အချက်အလက်ပမာဏ ကြီးမားစွာ သိမ်းဆည်းနိုင်စေပြီး ဓာတ်ပုံများ အပါအဝင် အမျိုးအစားအမျိုးမျိုးကို သိမ်းဆည်းနိုင်စေသည်။ ကျွန်ုပ်တို့၏ ပရောဂျက်ထဲသို့ ၎င်းကို တပ်ဆင်ကြပါစို့။ Terminal ထဲတွင် အောက်ပါအတိုင်း ရိုက်ထည့်ပါ-

terminalnpm i localforage

ကျွန်ုပ်တို့၏ application ကို ပြန်လည်စတင်ပါမည်။ src ဖိုလ်ဒါအတွင်း၌ သိုလှောင်ရာနှင့် အလုပ်လုပ်ရန် function များ ပါဝင်မည့် forStorage.js ဖိုင်ကို ဖန်တီးပါမည်။

သိုလှောင်ရာမှ ထုတ်ကုန်များ ရယူသော function ဖြင့် စတင်ပါမည်။ forStorage.js ထဲသို့ library ကို import လုပ်ထည့်ပြီး ထုတ်ကုန်များရရှိရန် getProducts function ကို ရေးသားပါမည်-

forStorage.jsimport localforage from 'localforage';

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

function ၏ကုဒ်အောက်တွင် ကျွန်ုပ်တို့သည် function များ ပုံမှန်အလုပ်လုပ်နိုင်စေရန် ကွန်ယက် နှောင့်နှေးမှု (စက္ကန့် 0.7 အထိ) ကို အတုယူသည့် someNetwork အတွက် ကုဒ်ကိုလည်း ထည့်သွင်းပါမည်။ ကျွန်ုပ်တို့၏ ထုတ်ကုန်သည် "ကက်ရှ် သိမ်းထားပါက" သိုလှောင်ရာနှင့် အလုပ်လုပ်သော function များတွင် နှောင့်နှေးမှု ရှိမည် မဟုတ်ပါ၊ မရှိပါက နှောင့်နှေးမှု ရှိပါမည်၊ ၎င်း၏အလုပ်လုပ်ပုံကို နောက်ပိုင်းတွင် သင်မြင်တွေ့ရပါမည်-

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);
  });
}