Redux ရှိ Reducers များ

ယခင်သင်ခန်းစာတွင် <createSlice> လုပ်ဆောင်ချက်ကို အသုံးပြု၍ <products> အတွက် slice နှင့် store တွင်သိမ်းဆည်းထားသော ဤ slice ကို အသစ်ပြန်လည်ပြင်ဆင်ပေးမည့် reducer ကို ဖန်တီးခဲ့ပါသည်။ ထပ်မံသတိပေးချင်သည်မှာ Redux တွင် state data များကို reducers များကို အသုံးပြု၍ ပြောင်းလဲခြင်းဖြစ်ပါသည်။

Reducers များအပေါ်တွင် ကန့်သတ်ချက်များ ရှိသည်ကို သတိရပါ။ Reducer တစ်ခုသည် လက်ရှိ state နှင့် <action> object တို့၏ တန်ဖိုးများကို အခြေခံ၍သာ state ကို အသစ်ပြန်လည်ပြင်ဆင်ပြီး၊ state ကို မည်သို့ပြောင်းလဲမည်၊ ပြီးလျှင် ၎င်း၏တန်ဖိုးအသစ်ကို ပြန်လည်ပေးပို့ရန် ဆုံးဖြတ်ပါသည်။

JavaScript တွင် objects နှင့် arrays များသည် default အားဖြင့် mutable (ပြောင်းလဲနိုင်သော) ဖြစ်သည်ကို ကျွန်ုပ်တို့သိပါသည်။ ထို့အပြင် state ကို တိုက်ရိုက်ပြောင်းလဲခွင့် မရှိပါ၊ �ိုသို့သောအခြေအနေတွင် မိတ္တူကူးယူမှုများဖြင့်သာ လုပ်ဆောင်ရမည်။ Reducer သည်လည်း ဤစည်းမျဉ်းကို လိုက်နာရပါမည်။ သို့သော် ဤကဲ့သို့ logic များကို လက်ဖြင့်ရေးသားခြင်းသည် အတန်ငယ်ပင်ပန်းနိုင်ပြီး ခက်ခဲနိုင်သောအလုပ်ဖြစ်ကာ၊ ဤနေရာတွင် <createSlice> လုပ်ဆောင်ချက်သည် ကူညီပေးပါသည်။ ထို function သည် Immer library ကို အသုံးပြုထားပြီး၊ သင်၏ 'mutable' ကုဒ်ကို 'immutable' ကုဒ်အဖြစ် ပြောင်းလဲပေးပါသည်။ ထို့ကြောင့်၊ ပြစ်မှုကျူးလွန်ခြင်းနှင့် ဘဝကိုရိုးရှင်းအောင်ပြုလုပ်ခြင်းကို <createSlice> သို့မဟုတ် <createReducer> functions များကို အသုံးပြုသည့်အခါမှသာ လုပ်ဆောင်နိုင်ပါသည်။

Reducer ၏ ကန့်သတ်ချက်များတွင် asynchronous logic များ အသုံးပြုခြင်း၊ ကျပန်းတန်ဖိုးများ တွက်ချက်ခြင်းနှင့် အခြားသော "ဘေးထွက်ဆိုးကျိုး" များ လုပ်ဆောင်ခြင်းတို့လည်း ပါဝင်ပါသည်။ ယခု reducer နှင့် နီးကပ်စွာတွေ့ဆုံပြီးနောက်၊ ကျွန်ုပ်တို့၏ products application သို့ ပြန်သွားကြပါစို့။

ကျွန်ုပ်တို့၏ application တွင် ယခင်သင်ခန်းစာများတွင် ဖန်တီးခဲ့သော store ရှိသော်လည်း၊ ယခုအချိန်ထိ ဘာမျှမရှိသေးပါ။ ကျွန်ုပ်တို့၏ <store.js> ဖိုင်ကို ဖွင့်ကြည့်ပြီး ၎င်းထဲသို့ ကုဒ်အနည်းငယ် ထည့်ကြပါစို့။ အစပိုင်းတွင် products အတွက် reducer function ကို ၎င်းထဲသို့ import လုပ်ကြပါမည်။

import productsReducer from '../parts/products/productsSlice'

ယခု reducer အဖြစ် ကျွန်ုပ်တို့သည် import လုပ်ထားသော <productsReducer> function ကို သတ်မှတ်ပေးနိုင်ပါသည်။

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

အထက်ပါစာကြောင်းဖြင့် ကျွန်ုပ်တို့၏ store အား ယခုအခါ action တစ်ခုဖြစ်ပေါ်လာပါက <state.products> slice အတွက် data အားလုံးကို <productsReducer> မှ အသစ်ပြန်လည်ပြင်ဆင်ပေးမည် ဟု ပြောပြလိုက်ခြင်းဖြစ်ပါသည်။

ယခု သင်သည် application ကို စတင်နိုင်ပါသည် (console တွင် invalid reducer အကြောင်း သတိပေးချက်ပျောက်သွားသည်ကို သတိပြုပါ!)၊ ဘရောက်ဆာ၏ Redux DevTools ကိုဖွင့်ပြီး ၎င်း၏ tabs များကြားတွင် လှည့်ပတ်ကြည့်ရှုနိုင်ပါသည်။ ဥပမာအားဖြင့်၊ Inspector tab အတွင်းရှိ State tab ကိုနှိပ်ပါက application ကိုပထမဆုံးအကြိမ်စတင်သည့်အခါ ကနဦး state တန်ဖိုးအဖြစ် ထွက်ပေါ်လာသော ကျွန်ုပ်တို့၏ products objects နှစ်ခုကို မြင်တွေ့နိုင်ပါသည်။ Log monitor tab တွင် global state သည် မည်သည့် slices များပါဝင်သည်ကို မြင်တွေ့နိုင်ပြီး၊ ၎င်းသည် objects နှစ်ခုပါဝင်သော <products> slice ဖြစ်ပါသည်။ Chart tab ကိုလည်း ဝင်ရောက်ကြည့်ရှုပါ။

သင်၏ ကျောင်းသားများနှင့်အတူ application ကိုဖွင့်ပြီး <store.js> ဖိုင်ရှိ ကုဒ်ကို သင်ခန်းစာတွင်ပြထားသည့်အတိုင်း ပြောင်းလဲပါ။

သင်၏ application ကို ဘရောက်ဆာတွင် စတင်လိုက်ပြီး Redux DevTools extension ၏ tabs များကြားတွင် လှည့်ပတ်ကြည့်ရှုပါ။