Redux တွင် အပိုပြုပြင်သူများ

ကျွန်ုပ်တို့ၑ ထုတ်ကုန်များ အက်ပ်ကို ဖွင့်ကြည့်ပြီး ၄င်း၏အတွင်း၌ ဖိုင်အမည် productsSlice.js ကို ရှာကြည့်ပါ။ သင် သတိပြုမိပြီးဖြစ်မည်ထင်သည်၊ thunk fetchProducts ကို သီးခြားလုပ်ဆောင်ချက် တစ်ခုအနေဖြင့် ကျွန်ုပ်တို့ ဖန်တီးခဲ့သည်မဟုတ်လား။ createSlice သည် thunks များကို သတ်မှတ်ခြင်းအား မပံ့ပိုးသောကြောင့် ကျွန်ုပ်တို့ ထိုသို့ ပြုလုပ်ခဲ့ခြင်း ဖြစ်သည်။ ဤအခြေအနေတွင် products slice ၏ reducer အား slice products ၏ အပြင်ဘက်တွင် သတ်မှတ်ထားသော action များကို တုံ့ပြန်ရန် မည်သို့ အင်အားဖြည့်ပေးမည်နည်း။ ကျွန်ုပ်တို့အတွက် thunk fetchProducts မှ ပေးပို့သော action များကို ကိုင်တွယ်ဖြေရှင်းရန် လိုအပ်နေပါသည်။

ထိုကဲ့သို့သော အခြေအနေများအတွက် createSlice တွင် extraReducers ဟူသော ဂုဏ်သတ္တိ တစ်ခုရှိပြီး၊ ၄င်းသည် လက်ရှိ slice တွင် မဟုတ်ဘဲ အခြားနေရာများတွင် သတ်မှတ်ထားသော action များကို ကိုင်တွယ်ဖြေရှင်းမည့် အပိုပြုပြင်သူများ (extra reducers) ထည့်သွင်းခွင့်ပေးသည်။

ယခု createSlice လုပ်ဆောင်ချက်၏ ကိုယ်ထည်အတွင်း၌ reducer အားလုံးပါဝင်သည့် reducers ဂုဏ်သတ္တိ ပြီးနောက်၊ အခြား နည်းလမ်းတစ်ခုဖြစ်သော extraReducers ကို ထပ်မံပေါင်းထည့်ကြပါစို့။

products/productsSlice.jsextraReducers() {},

ဤနည်းလမ်းသို့ ကျွန်ုပ်တို့သည် builder ဟူသော အရာဝတ္ထု (object) တစ်ခုကို ပေးပို့ရမည်။ ၎င်း builder တွင် အပိုပြုပြင်သူများ (extra reducers) ထည့်သွင်းရန် အသုံးပြုနိုင်သော နည်းလမ်းများ ပါဝင်သည်။

products/productsSlice.jsextraReducers(builder) {},

ကျွန်ုပ်တို့သည် builder ၏ နည်းလမ်းများထဲမှ တစ်ခုဖြစ်သော addCase ကို အသုံးပြုမည်။ ၎င်းသည် ပထမအကြိမ်သတ်မှတ်ချက် (action creator) ကို လက်ခံပြီး၊ ဒုတိယသတ်မှတ်ချက်အနေဖြင့် reducer ကို လက်ခံသည်။ fetchProducts မှ တောင်းဆိုချက် (request) ပြုလုပ်သည့်အခါ ပေးပို့သော action များထဲမှ တစ်ခုမှာ fetchProducts.pending ဖြစ်ပြီး၊ ၄င်းက တောင်းဆိုချက် စတင်ပို့လိုက်ပြီဟု ဖော်ပြသည်။ ဤအခြေအနေတွင် အဆင့်အား (status) 'in progress' သို့ ပြောင်းလဲကြပါစို့ (ယခင်က ၎င်းသည် 'idle' ဖြစ်ခဲ့သည်)။

products/productsSlice.jsextraReducers(builder) {
  builder.addCase(fetchProducts.pending, (state) => {
    state.status = 'in progress'
  })
},

ယခု တောင်းဆိုချက် အောင်မြင်စွာ ပြီးမြောက်သည့်အခါ ပေးပို့မည့် action ကို ကိုင်တွယ်ဖြေရှင်းကြပါစို့။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် state အတွင်းရှိ အဆင့်ကို (status) 'success' သို့သာ ပြောင်းလဲရုံမက၊ action ၏ payload ထဲမှ ထုတ်ကုန်များအား products slice ထဲသို့ ယူဆောင်သွားမည်။ ထုတ်ကုန်အားလုံးကို စုစည်းရန် concat နည်းလမ်းကို လိုအပ်ပါမည်။

products/productsSlice.jsextraReducers(builder) {
  builder
    .addCase(fetchProducts.pending, (state) => {
      state.status = 'in progress'
    })
    .addCase(fetchProducts.fulfilled, (state, action) => {
      state.status = 'success'
      state.products = state.products.concat(action.payload)
    })
},

တောင်းဆိုချက် မအောင်မြင်ပါက ကျွန်ုပ်တို့သည် အဆင့်ကို (status) 'fail' သို့ ပြောင်းလဲပြီး state ထဲတွင် အမှားအယွင်းအကြောင်း မက်ဆေ့ချ်ကို ရေးမှတ်ထားမည်။

products/productsSlice.js.addCase(fetchProducts.rejected, (state, action) => {
  state.status = 'fail'
  state.error = action.error.message
})

အကယ်၍ ကျွန်ုပ်တို့ အက်ပ်ကို ယခု အသက်သွင်းပြီး မီနူးထဲတွင် 'Products' ကို နှိပ်ကြည့်ပါက (ဆာဗာပေါ်တွင် ကျွန်ုပ်တို့ သတ်မှတ်ထားသော နှောင့်နှေးမှုကို သတိရပါ။) စက္ကန့်အနည်းငယ်အကြာတွင် ထုတ်ကုန်များစာရင်းပါ စာရင်းကို မြင်တွေ့ရမည်။

ထိုနည်းတူစွာပင် Redux DevTools တွင်လည်း အပြောင်းအလဲများကို မြင်တွေ့ရမည်။ ယခု ကျွန်ုပ်တို့၏ ထုတ်ကုန်များသည် state ထဲတွင်လည်း ပေါ်လာမည် (အကယ်၍ သင်သည် products/fetchProducts/fulfilled action အပေါ် နှိပ်မိပါက 'State' tab ကို ကြည့်ပါ။) အဲဒီမှာပင် အသစ်ဖြစ်သော အဆင့် 'success' ကိုလည်း မြင်ရမည်။ ယခု products/fetchProducts/pending action အပေါ် နှိပ်ကြည့်ပြီး 'State' tab သည် ယခုအခါ မည်သို့ကွဲပြားသွားသည်ကို ကြည့်ပါ။

သင့်အနေဖြင့် ကြုံတွေ့နိုင်သော တစ်ခုတည်းသော မသာယာမှုမှာ (ကျွန်ုပ် ယခင်သင်ခန်းစာတွင် ဤအကြောင်း ပြောခဲ့သည်။) ဒေတာတောင်းဆိုချက်များ ထပ်နေခြင်းပင် ဖြစ်သည်။ ထို့ကြောင့် ကျွန်ုပ်တို့၏ စာရင်းတွင် 8 မဟုတ်ဘဲ 16 ထုတ်ကုန်များနှင့် ဖွံ့ဖြိုးသူ console တွင် အရေးကြီးသော သတိပေးချက်များ ရရှိနိုင်သည်။ ဤပြဿနာကို နောက်လာမည့် သင်ခန်းစာတွင် အတူတကွ ဖြေရှင်းကြပါစို့။