Redux store အတွင်းရှိ ထုတ်ကုန်ဒေတာများ ပြုပြင်ခြင်း

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

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ အက်ပ်လီကေးရှင်းကို ဖွင့်ပြီး productsSlice.js ဖိုင်ကို ဝင်ကြည့်ပါမည်။ စတင်ရန် products slice အတွက် reducer နောက်တစ်ခု ရေးသားရန် လိုအပ်သည်။ ထို reducer သည် ထုတ်ကုန်ကို မွမ်းမံသည့်အခါတွင် လုပ်ဆောင်မည်ဖြစ်သည်။ ၎င်းကို productUpdated ဟု အမည်ပေးပြီး productAdded reducer ၏ နောက်တွင် reducers အကွက်အတွင်း ထည့်သွင်းပါမည်။ ထို့ပြင် ၎င်းကို မျက်ခြေမပြတ် state နှင့် action ပါရာမီတာများ ထည့်ပေးရမည်။ ကျွန်ုပ်တို့ မှတ်မိသကဲ့သို့ reducer သည် ထိုအရာများအပေါ် အခြေခံ၍ လုပ်ဆောင်သည်။

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

ယခု ထုတ်ကုန်တစ်ခုကို မွမ်းမံရန် မည်သည့်ဒေတာများ လိုအပ်မည်ကို စဉ်းစားကြည့်ကြပါစို့။ ပထမဦးစွာ - ၎င်းသည် id ဖြစ်သည်။ ၎င်းအား အသုံးပြု၍ store အတွင်းရှိ စိတ်ဝင်စားဖွယ် ထုတ်ကုန်ကို ရှာဖွေနိုင်မည် ဖြစ်သည်။ ကျန်ရှိသော ဒေတာများ - အမည်၊ ဖော်ပြချက်၊ ဈေးနှုန်းနှင့် ပမာဏသည် ကျွန်ုပ်တို့ ပြောင်းလဲရန် အတွက် ဖြစ်သည်။ ဤတန်ဖိုးအားလုံးကို ကျွန်ုပ်တို့ရရှိလာမည့် action အရာဝတ္ထု၏ payload property မှ ရရှိမည်ဖြစ်သည်။ အကယ်၍ ကျွန်ုပ်တို့ လက်ဖြင့် ရေးသားပါက အောက်တွင် ပြသထားသည့်အတိုင်း ဖြစ်ပေါ်လာမည် ဖြစ်သည်။ payload property ၏ မျှော်မှန်းထားသော တန်ဖိုးသည် argument တစ်ခု ဖြစ်သည်ကို သတိပြုပါ။ ထို့ကြောင့် ဤနေရာတွင် အရာဝတ္ထု တစ်ခု ပေးပို့မည် ဖြစ်သည် (ဤအကြောင်းကို နောက်ပိုင်းတွင် ဆွေးနွေးသွားပါမည်)။

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

အဓိကအချက်များကို ရှင်းလင်းစွာ သိရှိပြီးနောက် ယခု productUpdated အတွက် ကုဒ်ကို ကြက်ခြေခတ် ကွင်းစွတ်များ အတွင်း ရေးသားနိုင်ပါသည်။ ပထမဦးစွာ action အရာဝတ္ထုမှ ပြောင်းလဲထားသော ဒေတာများကို ရယူပါမည်။

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

ယခု ရရှိလာသော id ကို အသုံးပြု၍ store အတွင်း ပြုပြင်ရန် လိုအပ်သော ထုတ်ကုန်ကို ရှာဖွေပါမည်။

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

အကယ်၍ ထိုသို့သော ထုတ်ကုန်ကို store အတွင်း တွေ့ရှိပါက ၎င်း၏ ဒေတာများကို တန်ဖိုးသစ်များဖြင့် အစားထိုးပါမည်။

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
  if (desiredProduct) {
    desiredProduct.name = name
    desiredProduct.desc = desc
    desiredProduct.price = price
    desiredProduct.amount = amount
  }
},

component အတွင်း အသုံးပြုရန် action creator ကို တင်ပို့ရန် ကျန်ရှိနေပါသေးသည်။ createSlice သည် ကျွန်ုပ်တို့အတွက် ကြိုတင် ဖန်တီးပေးမည် ဖြစ်သည်။ လက်ရှိ productAdded နှင့်အတူ ဖိုင်၏ အဆုံးတွင် တင်ပို့ခြင်းအတွက် ၎င်းကို ထည့်သွင်းကြပါစို့။

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions