Redux အတွင်း ရောင်းချသူအချက်အလက်များ ပေါင်းထည့်ခြင်း

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

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါသော အက်ပ်လီကေးရှင်းကို ဖွင့်ပါ၊ ပြီးလျှင် ဖိုင်အမည် productsSlice.js ကို ဖွင့်ပါ။ prepare အတွက် ပါရာမီတာတစ်ခုထပ်ပို့ပါစို့၊ ၎င်းကို sellerId ဟု အမည်ပေးပြီး ၎င်းနောက် အကြွင်း payload အတွက် သတ်မှတ်ပါမည်။ ယခု ကျွန်ုပ်တို့၏ prepare အတွက် ကုဒ်အပိုင်းအစသည် ဤကဲ့သို့ ဖြစ်လာမည်-

products/productsSlice.jsprepare(name, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      name,
      desc,
      price,
      amount,
      seller: sellerId,
    },
  }
},

ယခု ကျွန်ုပ်တို့သည် ထုတ်ကုန်အသစ်ထည့်သွင်းရန် ဖောင်ဖိုင်ဖြစ်သော NewProductForm.jsx အတွင်း အပြောင်းအလဲများစွာ ပြုလုပ်ရန် လိုအပ်ပါသည်။ ပထမဦးစွာ ရောင်းချသူ၏ id အတွက် နောက်ထပ် Local State တစ်ခု ထည့်ပါမည်-

products/NewProductForm.jsxconst [sellerId, setSellerId] = useState('')

ထို့နောက် dispatch ကိန်းရှင်ကို useDispatch အတွက် ကြေညာပြီးနောက်၊ Hook useSelector ကို အသုံးပြု၍ State မှ ရောင်းချသူများ Slice ကို ရယူရန် ကုဒ်ကို ထည့်ပါမည်-

products/NewProductForm.jsxconst sellers = useSelector((state) => state.sellers)

အချက်အလက်ထည့်သွင်းရန် ကွက်လပ်များအတွက် လက်ခံကိုင်တွယ်သူများထဲသို့ နောက်ထပ်တစ်ခု ထည့်ပါမည်-

products/NewProductForm.jsxconst onSellerChanged = (e) => setSellerId(e.target.value)

Action productAdded အတွက် sellerId ကို ထည့်သွင်း၍ onSaveProductClick ကို ပြင်ဆင်ပါမည်-

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount, sellerId))