Redux တွင် Action Object အတွက် ဒေတာများကို ပြင်ဆင်ခြင်း

မကြာသေးမီက ကျွန်ုပ်တို့ ဆွေးနွေးခဲ့သည်မှာ function createSlice သည် action.payload ဖန်တီးရာတွင် argument တစ်ခုကိုသာ မျှော်လင့်သည်ဟူ၏။ တစ်ဖက်တွင် ဤသည်က ၎င်း၏အသုံးပြုမှုကို ရိုးရှင်းစေသော်လည်း၊ အခြားတစ်ဖက်တွင် action object ၏ အကြောင်းအရာများကို ပြင်ဆင်ရန် အပိုလုပ်ဆောင်ချက်များ လိုအပ်နိုင်ပါသည်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအက်ပ်ကို ဖွင့်ကြည့်ပါ၊ ထိုအတွင်းရှိ ဖိုင်အမည် NewProductForm.jsx ကို ဖွင့်ပါ။ အောက်ပါကုဒ်လိုင်းကို သတိပြုပါ။

NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

ဤနေရာတွင် ကျွန်ုပ်တို့သည် payload object ကို React component အတွင်း တိုက်ရိုက်စုဆောင်းပြီး action productAdded သို့ ထည့်ပေးနေပါသည်။ အလားတူ action ကို component အများအပြားမှ ပို့ရန် လိုအပ်လာပါက သို့မဟုတ် စုဆောင်းရန် logic များ ရှုပ်ထွေးလာပါက ဘာလုပ်မလဲ။ အယူအဆအရ ကျွန်ုပ်တို့၏ component သည် ဤ action အတွက် payload အတွင်းရှိ object ပုံစံကို သိရန် မလိုအပ်သင့်ပါ။ ထို့အပြင် ကုဒ်များကို အဆက်မပြတ် ထပ်တူပြုခြင်းကိုလည်း ကျွန်ုပ်တို့ သဘောမတွေ့ပါ။

ဤပြဿနာများကို ကျွန်ုပ်တို့၏ နာမည်ကြီး createSlice က ထပ်မံကူညီဖြေရှင်းပေးနိုင်ပါသည်၊ အဘယ်ကြောင့်ဆိုသော် reducer ရေးသားရာတွင် ၎င်းသည် callback function prepare ကို အသုံးပြုခွင့်ပေးပြီး၊ �ိုအတွင်း၌ logic အမျိုးမျိုးရေးသားခြင်း၊ ကျပန်းနံပါတ်များ ထုတ်ခြင်းနှင့် အခြားအရာများ ပြုလုပ်နိုင်ပါသည်။ ထိုသို့သောအခြေအနေတွင် reducer field အတွက် တန်ဖိုးကို အောက်ပါ object ပုံစံဖြင့် ကိုယ်စားပြုနိုင်ပါသည်။

jsx{reducer, prepare}

ယခု ကျွန်ုပ်တို့၏ ဖိုင် productsSlice.js ကို ဖွင့်ပါ ပြီးလျှင် reducer productAdded အတွက် ကုဒ်ကို ပြောင်းလဲပါ။ ယခု ကုဒ်၏ ဤအပိုင်းသည်။

products/ProductSlice.jsproductAdded(state, action) {
  state.push(action.payload)
},

ကျွန်ုပ်တို့ အောက်ပါအတိုင်း ပြောင်းလဲမည်၊ ထိုတွင် function reducer သည် store အတွင်း state ကို အပ်ဒိတ်လုပ်ရန် တာဝန်ယူမည်၊ prepare သည် ကျွန်ုပ်တို့၏ အခြားဒေတာများနှင့်အတူ ထုတ်လုပ်ထားသော id ပါသည့် payload object ကို ပြန်ပေးရန် တာဝန်ယူမည်။

products/ProductSlice.jsproductAdded: {
  reducer(state, action) {
    state.push(action.payload)
  },
  prepare(name, desc, price, amount) {
    return {
      payload: {
        id: nanoid(),
        name,
        desc,
        price,
        amount,
      },
    }
  },
},

ယခု ကျွန်ုပ်တို့သည် id ကို component ထဲတွင် မဟုတ်ဘဲ ဤနေရာတွင် ထုတ်လုပ်မည်ဖြစ်သောကြောင့်၊ import ထဲသို့ nanoid ကို ထည့်ကြပါစို့။

products/ProductSlice.jsimport { createSlice, nanoid } from '@reduxjs/toolkit'

နောက်ဆုံးတွင် NewProductForm.jsx အတွင်း ပြောင်းလဲမှုများ ပြုလုပ်ပါ။ အောက်ပါလိုင်းအစား။

products/NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

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

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

အက်ပ်ကို စတင်ပါ၊ ထို့နောက် ထုတ်ကုန်အသစ်တစ်ခု ဖန်တီးပြီး ကျွန်ုပ်တို့ ဘာမှ မပျက်စီးကြောင်း သေချာပါစေ။