Selectors နှင့် useSelector Hook ကို Redux တွင် အသုံးပြုခြင်း

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် store ထဲသို့ ထုတ်ကုန်များ၏ အချက်အလက်များကို ရေးသားခဲ့ကြသည်။ ထိုအချက်အလက်များကို store မှ မည်သို့ရယူမည်နည်း။

ထိုသို့ပြုလုပ်ရန်၊ ကျွန်ုပ်တို့သည် function-selector ကို ရေးသားရန်လိုအပ်ပါသည်။ ဤ function သည် store ထဲတွင် သိမ်းဆည်းထားသော state တန်ဖိုးမှ အချက်အလက် တစ်ခုတည်းသော အပိုင်းကို မည်သို့ထုတ်ယူရမည်ကို သိရှိပြီး applicaiton ကြီးထွားလာသည်နှင့်အမျှ ကုဒ်များကို ထပ်ခါတလဲလဲ ရေးသားခြင်းမှ ရှောင်ရှားရန် ကူညီပေးပါသည်။ ဤ function သည် input အဖြစ် state ကို လက်ခံပြီး output အဖြစ် လိုအပ်သော state slice ကို ထုတ်ပေးပါသည်။ ဥပမာအားဖြင့် ဤကဲ့သို့ဖြစ်သည်။

jsxconst selectValue = state => state.some.value

ကျောင်းသုံးစာအုပ်၏ အစောပိုင်းတွင် ဖော်ပြခဲ့သည်မှာ store တွင် getState method ရှိသည်။ ထို့ကြောင့် ကျွန်ုပ်တို့သည် state ၏ တန်ဖိုးကို ရယူရန် ၎င်းကို လွယ်ကူစွာအသုံးပြုနိုင်သည်။

jsxconst value = selectValue(store.getState())

ပြဿနာမှာ ကျွန်ုပ်တို့၏ React components များသည် store သို့ တိုက်ရိုက်ဝင်ရောက်၍ မရခြင်းဖြစ်သည်။ အဘယ်ကြောင့်ဆိုသော် component ၏ file ထဲသို့ ၎င်းကို import လုပ်ခြင်းကို တားမြစ်ထားသောကြောင့်ဖြစ်သည်။ သို့သော် React-Redux hook ဖြစ်သော useSelector ကို အသုံးပြု၍ component ထဲတွင် အချက်အလက်များကို ရယူနိုင်သော အခွင့်အရေးရှိသည်။ ထို့အပြင် ဤ hook နှင့် ကျွန်ုပ်တို့၏ components များသည် အမြဲတမ်း လက်ရှိအချိန်နှင့်သက်ဆိုင်သော အချက်အလက်များကိုသာ ရရှိမည်ဖြစ်သည်။

jsxconst count = useSelector(selectValue)