Redux အက်ပ်လီကေးရှင်းတွင် Reducer ထည့်သွင်းခြင်း

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

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါဝင်သော အက်ပ်လီကေးရှင်းကို ဖွင့်လိုက်ပါ၊ ၎င်းအတွင်းရှိ reducer အားလုံးပါဝင်သော productsSlice.js ဖိုင်ကိုလည်း ဖွင့်လိုက်ပါ။ ယခု reducers property အတွင်းတွင် reducer အသစ် reactionClicked တစ်ခုကို ဖန်တီးပါမည် (၎င်းကို productAdded ရှေ့တွင် ပထမဆုံးထားနိုင်သည် - သို့သော် ကွာခြားမှုမရှိပါ)။ ပုံမှန်အတိုင်း၊ ၎င်းထံသို့ state နှင့် action parameter များကို ပေးပို့ပါမည်။

products/productsSlice.jsreactionClicked(state, action) {},

ယခု ကျွန်ုပ်တို့ ယခင်အဆင့်တွင် ဗလာထားခဲ့သော ကျွမ်းကွင်းများအတွင်းတွင်၊ ၎င်းအတွက် code ကို ရေးသားပါမည်။ ပထမဦးစွာ action object မှ payload ကို ထုတ်ယူ၍ ထုတ်ကုန်၏ id နှင့် တုံ့ပြန်မှု၏ အမည်ကို ရယူပါမည်။

products/productsSlice.jsconst { productId, reaction } = action.payload

ထို့နောက် ပေးပို့ထားသော state မှ လိုအပ်သော ထုတ်ကုန်ကို ရယူပါမည်။

products/productsSlice.jsconst currentProduct = state.find(product => product.id === productId)

ထိုသို့သော ထုတ်ကုန်ရှိပါက၊ ပေးပို့ထားသော တုံ့ပြန်မှု၏ တန်ဖိုးကို 1 တိုးမြှင့်ပေးပါမည်။

products/productsSlice.jsif (currentProduct) {
  currentProduct.reactions[reaction]++
}

ဤသို့ဖြင့်၊ ကျွန်ုပ်တို့၏ reactionClicked အတွက် code ပြီးဆုံးပါပြီ။

products/productsSlice.jsreactionClicked(state, action) {
  const { productId, reaction } = action.payload
  const currentProduct = state.find(product => product.id === productId)
  if (currentProduct) {
    currentProduct.reactions[reaction]++
  }
},

ဖိုင်အဆုံးသတ်တွင် ရရှိထားသော action creator ကို export ပြုလုပ်ရန် ထည့်သွင်းပါမည်။

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

ဤနေရာတွင် အရေးကြီးသော အချက်နှစ်ချက်ကို မှတ်သားထားရန် လိုအပ်ပါသည်။ အရင်သင်ခန်းစာများမှ သင်မှတ်မိသကဲ့သို့ - reducer code အတွင်းရှိ တန်ဖိုးကို ဤနည်းအတိုင်း တိုက်ရိုက်အသစ်ပြုလုပ်ခြင်း (ဤစာကြောင်းကို ကြည့်ပါ။ reactions[reaction]++) မပြုလုပ်သင့်ပါ၊ သို့သော် ကျွန်ုပ်တို့အတွက် ခွင့်ပြုနိုင်သည်၊ မှာ ကျွန်ုပ်တို့သည် ထိုသို့ပြုလုပ်သည့်အခါ createSlice အတွင်း၌ဖြစ်၍ Immer library ကို အသုံးပြုသောကြောင့်ဖြစ်သည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ code ကို တန်ဖိုးအသစ်ပြုလုပ်ခြင်း၏ "လုံခြုံသော" ပုံစံသို့ ပြောင်းလဲပေးရန် ဂရုစိုက်ပေးပါလိမ့်မည်။ ဤအရာသည် ကျွန်ုပ်တို့အား ရှုပ်ထွေးသောအရာများကို ပိုမိုရိုးရှင်းသောနည်းလမ်းဖြင့် ရေးသားနိုင်စေပါသည်။

နောက်တစ်ခု မှတ်သားထားရမည့်အရာမှာ - action object သည် အနည်းဆုံးဖြစ်နိုင်သော အချက်အလက်ပမာဏကိုသာ ပါဝင်သင့်သည် - မည်သို့ဖြစ်ပျက်သည်ကို ညွှန်ပြရန်အတွက်သာဖြစ်သည်။ ၎င်းအတွင်း မည်သည့်တွက်ချက်မှုမျှ ပြုလုပ်သင့်မည်မဟုတ်ပါ။ State ကို အသစ်ပြုလုပ်ရန် လိုအပ်သော တွက်ချက်မှုအားလုံးကို Reducer အတွင်း၌ ပြုလုပ်သင့်သည်၊ ဤနေရာတွင် ဤအတွက် လိုအပ်သလောက်သော logic များကို ရေးသားနိုင်ပါသည်။