Redux ရှိ ဖောင်ကို ပြင်ဆင်ခြင်း

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

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအက်ပ်ကို ဖွင့်ပါ၊ ထို့အတွင်းရှိ ဖိုင် NewProductForm.jsx ကို ဖွင့်ပါ။ အမိန့် return မတိုင်ခင် ရောင်းချသူကို ရွေးချယ်မည့် အောက်ချပွင့်စာရင်းအတွက် အပြင်အဆင်ကုဒ်အပိုင်းလေးတစ်ခုကို ထည့်ကြပါစို့။ စံနည်းလမ်းဖြစ်သော map ကို အသုံးပြု၍ အကောင်အထည်ဖော်ကြပါမည်။

products/NewProductForm.jsxconst sellersList = sellers.map((seller) => (
  <option key={seller.id} value={seller.id}>
    {seller.name}
  </option>
))

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

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">ရောင်းချသူ:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

ယခု ကျွန်ုပ်တို့၏ အက်ပ်ကို စတင်နိုင်ပါပြီ။ ထည့်သွင်းရန် ဖောင်တွင် ရောင်းချသူများ၏ စာရင်း ပေါ်လာပါလိမ့်မည်။ ဖောင်ကို အချက်အလက်များ ဖြည့်စွက်၍၊ ၎င်းတို့ထဲမှ တစ်ဦးကို ရွေးချယ်ကာ သိမ်းဆည်းရန် ခလုတ်ကို နှိပ်ကြည့်ပါ။ ယခု Redux DevTools ထဲသို့ ကြည့်လျှင်၊ အပြောင်းအလဲများကို မြင်ရမည် - ထပ်ထည့်ထားသော ထုတ်ကုန်အသစ်တွင် ရွေးချယ်ထားသော ရောင်းချသူ၏ id ကို တန်ဖိုးအဖြစ်ထားသည့် seller ဂုဏ်သတ္တိ ပေါ်လာပါမည်။ ထို့အပြင် State တဘ်တွင် ယခု products နှင့် sellers ဆလိုင်းစ် နှစ်ခုကို ပြသထားပါသည်။