Redux လျှောက်လွှာ၏ လုပ်ဆောင်ချက်များဆွေးနွေးခြင်း

ယခင်သင်ခန်းစာများတွင် Redux လျှောက်လွှာတစ်ခုအလုပ်လုပ်ရန်လိုအပ်သော အစိတ်အပိုင်းအားလုံးကို ကျွန်ုပ်တို့လုပ်ဆောင်ခဲ့ပြီးပါပြီ။ ကျွန်ုပ်တို့၏ ထုတ်ကုန်များနှင့် လျှောက်လွှာ၏ အဓိကအဆင့်များကို အကျဉ်းချုပ်ပြန်လည်သုံးသပ်ကြည့်ကြပါစို့။

ပထမဆုံးစတင်အသုံးပြုသည့်အခါ ကျွန်ုပ်တို့၏လျှောက်လွှာသည် store မှ ထုတ်ကုန်နှစ်မျိုးပါဝင်သောစာရင်းကို useSelector ဖြင့်ရယူကာ စခရင်ပေါ်တွင်ပြသပေးပါသည်။ စခရင်ပေါ်တွင် ထုတ်ကုန်အသစ်၏ဒေတာများကို ထည့်သွင်းနိုင်သောဖောင်တစ်ခုလည်းပြသထားပါသည်။ အသုံးပြုသူက သိမ်းဆည်းမည့်ခလုတ်ကိုနှိပ်သည့်အခါ ခလုတ်၏ကိုင်တွယ်ဖြေရှင်းသူက အသုံးပြုသူဖောင်ထဲထည့်သွင်းခဲ့သော ထုတ်ကုန်အသစ်၏ဒေတာများပါဝင်သည့် productAdded action ကိုထုတ်လွှတ်ပေးပါသည်။ ထုတ်ကုန်များအတွက် ကျွန်ုပ်တို့ရေးသားခဲ့သော reducer function သည် ဤ action ကိုလက်ခံရရှိပြီး ထုတ်ကုန်များပါဝင်သောခင်းကျင်းထဲသို့ ထုတ်ကုန်အသစ်တစ်ခုပါဝင်သည့် object တစ်ခုထည့်သွင်းပေးပါသည်။ Store က component များအား state data များပြောင်းလဲသွားကြောင်းအသိပေးပါသည်။ ကျွန်ုပ်တို့၏ ProductsList component သည် ပြောင်းလဲသွားသောခင်းကျင်းကိုဖတ်ပြီး render ကိုခေါ်ယူသဖြင့် ထုတ်ကုန်စာရင်းထဲတွင် ထပ်မံထည့်သွင်းလိုက်သောထုတ်ကုန်ကိုမြင်တွေ့ရပါသည်။

ယခု ဘရောင်ဇာ၏ Redux DevTools ကိုဖွင့်ပြီး လျှောက်လွှာထဲတွင် နောက်ထပ်ထုတ်ကုန်တစ်ခုထပ်ထည့်ကြည့်ပါ၊ ထို့နောက် Log monitor tab ကိုကြည့်ပါ၊ ဤနေရာတွင် လျှောက်လွှာစတင်သည့်အချိန်က state မည်သို့ရှိခဲ့ပြီး ခလုတ်နှိပ်ပြီးနောက် action မည်သို့ပေါ်လာသည်ကိုမြင်တွေ့နိုင်ပါသည်။ ၎င်း၏ payload property နှင့် global state ရှိပြောင်းလဲမှုများကိုလည်းမြင်တွေ့နိုင်ပါသည်။

နောက်အခန်းတွင် ကျွန်ုပ်တို့၏ Redux လျှောက်လွှာရှိဒေတာများနှင့် ပိုမိုစနစ်တကျအလုပ်လုပ်သွားပါမည်။