React Router တွင် FormData ဖြင့် ဒေတာများ အပ်ဒိတ်လုပ်ခြင်း

ကျွန်ုပ်တို့တွင် သိုလှောင်ရာနေရာ (store) အတွင်းရှိ ထုတ်ကုန်၏ဒေတာများကို အပ်ဒိတ်လုပ်ရန် updateProduct function တစ်ခု ရှိပါသည်။ ယခု ကျွန်ုပ်တို့၏ တည်းဖြတ်ရန်ဖောင်မှ ဒေတာများဆီသို့ သွားကြပါစို့။

HTML ဖောင်တစ်ခုကို submit လုပ်သောအခါ browser သည် FormData object တစ်ခုကို ဖန်တီးကာ ဒေတာများဖြင့် server သို့ request body အတွင်း၌ ပို့ပေးပါသည်။ ထို့အပြင်၊ input တစ်ခုစီ၏ တန်ဖိုးကို name attribute မှယူထားသော object အတွင်းသို့ ထည့်သွင်းပေးပါသည် (ထို့ကြောင့် ၎င်းတို့ကို ဖောင်ထဲတွင် လိုအပ်ခဲ့ခြင်းဖြစ်သည်၊ မှတ်မိပါသလား?)။ ယခု ကျွန်ုပ်တို့သိရှိထားသည်မှာ React Router သည် request များကို server သို့ မပို့ဘဲ ကျွန်ုပ်တို့၏ route ၏ action method သို့ ပို့ပေးပြီး၊ ထိုနေရာသို့ FormData လည်း ရောက်ရှိသွားပါသည်။ ဤအရာကို အတူတကွ လုပ်ဆောင်ကြည့်ရအောင်။

အစပိုင်းအနေနှင့် ကျွန်ုပ်တို့၏ edit.jsx ဖိုင်လေးကို ဖွင့်ပြီး updateProduct ကို import လုပ်ပါမည်။

routes/edit.jsximport { updateProduct } from '../forStorage';

ထို့နောက် ကျွန်ုပ်တို့သည် ယခင်က လုပ်ခဲ့သကဲ့သို့ route object အတွက် action function တစ်ခုကို ရေးသားပါမည်။ loader function ၏ နောက်တစ်ခါထဲတွင် ၎င်းကို ထည့်သွင်းပါမည်။ ကျွန်ုပ်တို့သည် ၎င်းအား ကျွန်ုပ်တို့၏ request နှင့် URL parameter များကို လက်ခံပေးမည်ဖြစ်သည်။

routes/edit.jsxexport async function action({ request, params }) {}

Request မှ FormData ကိုရယူပြီး၊ ၎င်းထဲမှဒေတာများကို key:value စုံတွဲများ ပါဝင်သော object အဖြစ် ထုတ်ယူကာ၊ updateProduct ကို အသုံးပြု၍ ထိုဒေတာများကို သိုလှောင်ရာနေရာသို့ ပို့ဆောင်ပါမည်။

routes/edit.jsxexport async function action({ request, params }) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateProduct(params.productId, updates);
  return 1;
}

အခု လုပ်ရန်ကျန်သည်မှာ main.jsx ထဲသို့ဝင်ပြီး action function ကို တည်းဖြတ်ရန် route ၏ object ထဲသို့ ထည့်သွင်းရန်သာ ဖြစ်ပါသည်။ action ကို import လုပ်ပါမည်။

main.jsximport EditProduct, {
  loader as editProductLoader,
  action as editAction,
} from './routes/edit';

ထို့နောက် ၎င်းကို တည်းဖြတ်ရန် route object ထဲသို့ ထည့်သွင်းပါမည်။

main.jsx{
  path: 'products/:productId/edit',
  element: <EditProduct />,
  loader: editProductLoader,
  action: editAction,
},

ယခု application ကို စတင်လိုက်ပါ၊ စာရင်းထဲသို့ ထုတ်ကုန်အနည်းငယ်ကို ထည့်သွင်းပါ၊ ထို့နောက် ၎င်းတို့အား ကလစ်နှိပ်၍ ဖောင်ကိုဖြည့်စွက်ပြီး သိမ်းဆည်းရန် ခလုတ်ကို နှိပ်ပါ။ Developer tools ၏ localforage အပိုင်းထဲသို့ ဝင်ရောက်၍ သိုလှောင်ရာနေရာကို အသစ်ပြန်လည်စိစစ်ရန် မမေ့ပါနှင့်။ ယခု keyvaluespairs အပိုင်းတွင် ကျွန်ုပ်တို့ ထည့်သွင်းထားသော ဒေတာများဖြင့် products array အတွင်းရှိ object များကို မြင်တွေ့နိုင်ပါသည်။