Redux ရှိ Reducer နှင့် Action

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

အစဦးအနေဖြင့် ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအက်ပ်လီကေးရှင်းတွင် ဖိုင် productsSlice.jsx ကိုဖွင့်ပြီး createSlice⁅/c‌⁆ အတွက် reducer property တွင် productAdded function ကိုရေးပါမည်။ ထို function သည် ထည့်ပေးလိုက်သော လက်ရှိ state နှင့် action အပေါ်အခြေခံကာ store ထဲသို့ ထုတ်ကုန်အသစ်ထည့်သွင်းခြင်းကို လုပ်ဆောင်ပေးမည်။ ဤနေရာတွင် state တစ်ခုလုံးမပေးဘဲ ထုတ်ကုန်များအတွက်သာ တာဝန်ရှိသော အပိုင်း (products slice သည် ၎င်းအပိုင်းကိုသာ သိရှိသည်) ကိုသာ လက်ခံရရှိသည်ကို သတိပြုရန် လိုပါသည်။ ထုတ်ကုန်အသစ်ပါဝင်သော object သည် ဖောင်ထဲရှိ သိမ်းဆည်းရန် ခလုတ်ကိုနှိပ်သည့်အခါ handler ကထုတ်ပေးမည့် object action ၏ property payload အတွင်းတွင် ရှိပါလိမ့်မည်။ ရလဒ်အနေဖြင့် productAdded reducer သည် createSlice code အတွင်း ဤသို့ပုံစံဖြင့် ပေါ်လာပါမည်:

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

Action အကြောင်းကော? သင်ရှင်းလင်းချက်၏ အစောပိုင်းတွင် ကျွန်ုပ်တို့သည် action ဆိုသည်မှာ အက်ပ်လီကေးရှင်းထဲတွင် ဖြစ်ပျက်ခဲ့သည်ကိုဖော်ပြသော object တစ်ခုအနေဖြင့် ကိုယ်စားပြုသည့် event တစ်ခုဖြစ်ကြောင်း ဖော်ပြခဲ့သည်။ ထိုသို့သော object ကိုဖန်တီးပေးမည့် action creator function ကိုလည်း အသုံးပြုနိုင်ကြောင်း ကျွန်ုပ်တို့ပြောခဲ့သည်၊ ဥပမာအားဖြင့် ဤသို့ဖြစ်သည်:

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

သတင်းကောင်းမှာ ကျွန်ုပ်တို့အနေဖြင့် ဘာမှလုပ်စရာမလိုတော့ဘဲ ကျွန်ုပ်တို့အသုံးပြုနေသော function createSlice က ထိုအလုပ်ကို ကျွန်ုပ်တို့အတွက် လုပ်ဆောင်ပေးသွားမည်ဖြစ်သည်။ ကျွန်ုပ်တို့ reducer ကိုရေးပြီးသည်နှင့် ၎င်းသည် အလိုအလျောက် အလားတူနာမည်ဖြင့် action creator တစ်ခုကို ဖန်တီးပေးပါလိမ့်မည်။ ကျွန်ုပ်တို့လုပ်ရန်ကျန်သည်မှာ ရရှိလာသော action creator ကိ် component များတွင်နောက်ထပ်အသုံးပြုနိုင်ရန် export လုပ်ရန်ဖြစ်သည်။ ဖိုင်အဆုံးတွင် reducer ကို export မလုပ်မီ ဤသို့လုပ်ဆောင်ကြပါစို့:

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer