Redux ရှိ ဘရောက်ဆာတွင် ထုတ်ကုန်တည်းဖြတ်ရန် စာမျက်နှာ

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

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များဖြင့် အပလီကေးရှင်းကို ဖွင့်ပါ။ ထိုအထဲမှ App.jsx ဖိုင်ကို ဖွင့်ပြီး children ဂုဏ်သတ္တိအတွက် ခင်းကျင်းထဲသို့ နောက်ထပ် child route တစ်ခု၏ အရာဝတ္ထုတစ်ခုကို ထည့်ပါ (EditProductForm ကို import လုပ်ရန် မမေ့ပါနှင့်)။

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

ထို့အပြင် တည်းဖြတ်ဖောင်သို့ သွားရန် ကျွန်ုပ်တို့သည် လင့်ခ်တစ်ခု ပြုလုပ်ရန်လိုအပ်သည်။ ဤအတွက် ProductPage.jsx ကိုဖွင့်ပြီး ဤလင့်ခ်ကို နောက်ဆုံးစာပိုဒ်ပြီးနောက် ထုတ်ကုန်အရေအတွက်နှင့်အတူထားကာ အပိတ် div မတိုင်မီ ပြန်ပေးသည့် markup တွင် နေရာချပါ။

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Router စာကြည့်တိုက်မှ Link ကို import လုပ်ပါ။

import { Link } from 'react-router-dom'

ကျွန်ုပ်တို့၏ အပလီကေးရှင်းကို စတင်ပါ။ ထုတ်ကုန်တစ်ခုခု၏ ကြည့်ရှုခြင်း ခလုတ်ကို နှိပ်ပါ။ ၎င်းကို တည်းဖြတ်ရန် ကြိုးစားကြည့်ပါ။ ပြီးနောက် ဘယ်ဘက်ရှိ မီနူးထဲက 'Products' လင့်ခ်ကို နှိပ်ကာ ထုတ်ကုန်များစာရင်းသို့ ပြန်သွားပါ။ Redux DevTools တွင်လည်း အသစ်productUpdated action နှင့် store ရှိ ထုတ်ကုန်အရာဝတ္ထု၏ အပြောင်းအလဲများကို ကြည့်ရှုနိုင်သည်။

သင်၏ ကျောင်းသားများနှင့် အပလီကေးရှင်းကို ဖွင့်ပါ။ App.jsx ဖိုင်ထဲတွင် ကျောင်းသားအချက်အလက်များကို တည်းဖြတ်ရန်အတွက် နောက်ထပ် child route တစ်ခု ထည့်ပါ။

ကျောင်းသား၏ဒေတာများကို တည်းဖြတ်ရန် စာမျက်နှာသို့ သွားရန် ကျောင်းသားစာမျက်နှာ၏ markup တွင် Link element တစ်ခုကို ထည့်ပါ။

သင်၏ အပလီကေးရှင်းကို စတင်ပါ။ ကျောင်းသားတစ်ဦး၏ အချက်အလက်များကို တည်းဖြတ်ရန် ကြိုးစားကြည့်ပါ။ သင် တည်းဖြတ်ရန် စာမျက်နှာတွင် ရှိနေစဉ် ဘရောက်ဆာ၏ လိပ်စာတန်းကို သတိပြုပါ။ ဘရောက်ဆာရှိ Redux DevTools အတွင်း အပြောင်းအလဲများကို ကြည့်ပါ။