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

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

export async function createProduct() {}

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

export async function createProduct() {
	await someNetwork();
}

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

npm install --save nanoid

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

import { nanoid } from 'nanoid'

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

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

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

export 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 လုပ်ဆောင်ချက်၏နောက်တွင် ထားရှိပါမည်။

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

သင့်အနေဖြင့် ယခင်သင်ခန်းစာများဆိုင်ရာ လေ့ကျင့်ခန်းများတွင် သင်ဖန်တီးခဲ့သည့် application ကို ယူပါ။ သင်ခန်းစာ၏အကြောင်းအရာများကို အသုံးပြု၍ forStorage.js ဖိုင်ရှိ createStudent နှင့် setStudents လုပ်ဆောင်ချက်များကို သိုလှောင်ရာထဲသို့ ကျောင်းသားများ၏ဒေတာများကို ထည့်သွင်းရန် ရေးသားပါ။