React Router တွင် သိုလှောင်ရာသို့ ဒေတာများ ထည့်သွင်းခြင်း

ဤသင်ခန်းစာတွင် ကုန်ပစ္စည်းတစ်ခုကို သိုလှောင်ရာထဲသို့ ထည့်သွင်းခြင်းကို လုပ်ဆောင်ပါမည်။ ပထမဦးစွာ ကုန်ပစ္စည်းဖန်တီးရန် လိုအပ်သော createProduct လုပ်ဆောင်ချက်ကို forStorage.js ဖိုင်ရှိ getProducts လုပ်ဆောင်ချက်နောက်တွင် ထည့်သွင်းပါမည်။

forStorage.jsexport async function createProduct() {}

ပထမဦးစွာ someNetwork ကို ထပ်မံထည့်သွင်းပါမည်။

forStorage.jsexport async function createProduct() {
  await someNetwork();
}

ထို့နောက် ကုန်ပစ္စည်းတစ်ခုစီအတွက် ထူးခြားသော id တစ်ခု လိုအပ်ပါမည်၊ React သင်တန်းတွင် သင်တွေ့ဖူးပြီးဖြစ်ပါလိမ့်မည်။ ဤအတွက် nanoid စာကြည့်တိုက်ကို အသုံးပြုပါမည်။ တာမီနယ်တွင် အောက်ပါ command ကို ရိုက်ထည့်ပါ။

terminalnpm install --save nanoid

forStorage.js ဖိုင်သို့ စာကြည့်တိုက်ကို import လုပ်ပါမည်။

forStorage.jsimport { nanoid } from 'nanoid'

id များသည် 6 လုံးရှိသော စာလုံးများ ဖြစ်ပါစေ။

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
}

ကုန်ပစ္စည်းကို စတင်ဖန်တီးသည့်အခါ ကျွန်ုပ်တို့တွင် အရာဝတ္ထုအတွင်း၌ id သာရှိမည်ဖြစ်သည်။ getProducts ကိုခေါ်ပါမည်၊ ထုတ်လုပ်ထားသော ကုန်ပစ္စည်းကိုထည့်သွင်းပါမည် နှင့် ကျွန်ုပ်တို့၏ကုန်ပစ္စည်းစာရင်းကို သိုလှောင်ရာတွင် အပ်ဒိတ်လုပ်ပါမည်။ ပြီးပါပြီ။

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
  let product = { id };
  let products = await getProducts();
  products.unshift(product);
  await setProducts(products);
  return product;
}

သိုလှောင်ရာရှိ စာရင်းကို အပ်ဒိတ်လုပ်မည့် လုပ်ဆောင်ချက်သည် အောက်ပါအတိုင်းဖြစ်ပါမည် (၎င်းအတွင်းသို့ ကုန်ပစ္စည်းများကို products key အောက်တွင် ထည့်သွင်းပါမည်)၊ ၎င်းကို createProduct လုပ်ဆောင်ချက်၏နောက်တွင် ထားရှိပါမည်။

forStorage.jsfunction setProducts(products) {
  return localforage.setItem('products', products);
}