React Router တွင် URL parameter များအလိုက် data များကို store တွင်အသစ်ပြန်လည်သတ်မှတ်ခြင်း

ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် လမ်းကြောင်းတစ်ခုထပ်ပေါင်းပြီး data များကို တည်းဖြတ်ရန် form ပါသည့် စာမျက်နှာတစ်ခုကို ထည့်ခဲ့ပါသည်။ ကျွန်ုပ်တို့ form ထဲထည့်လိုက်သော data များကို သိမ်းဆည်းရန်သာ လိုတော့ပါသည်။

စတင်ရန် product data များကိုအသစ်ပြန်လည်သတ်မှတ်မည့် updateProduct function ကို forStorage.js ဖိုင်ထဲတွင် ထည့်ပါမည်။ ၎င်းထဲသို့ product ၏ id နှင့် ပြောင်းလဲလိုက်သော data များကို ပေးပို့ရန် လိုအပ်ပါသည်-

export async function updateProduct(id, updates) {
	await someNetwork();
}

ထို့နောက် store ထဲမှ 'products' key အလိုက် products များကို ရယူပြီး ၎င်း၏ id အလိုက် ကျွန်ုပ်တို့ ပြောင်းလဲလိုသော product ကို ရှာပါမည်။ ရှာမတွေ့ပါက error တစ်ခုကို ပစ်ပါမည်-

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);				
}

ထို့နောက် ရှာတွေ့ထားသော product ထဲသို့ ပြောင်းလဲမှုများ ထည့်သွင်းပြီး ကျွန်ုပ်တို့၏ setProducts function ကို အသုံးပြု၍ အသစ်ပြန်လည်သတ်မှတ်ထားသော စာရင်းကို store ထဲတွင် ပြန်ရေးရန်သာ ကျန်ရှိတော့ပါသည်-

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

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