Selectors နှင့် useSelector Hook ကို Redux တွင် အသုံးပြုခြင်း
ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် store ထဲသို့ ထုတ်ကုန်များ၏ အချက်အလက်များကို ရေးသားခဲ့ကြသည်။ ထိုအချက်အလက်များကို store မှ မည်သို့ရယူမည်နည်း။
ထိုသို့ပြုလုပ်ရန်၊ ကျွန်ုပ်တို့သည် function-selector ကို ရေးသားရန်လိုအပ်ပါသည်။ ဤ function သည် store ထဲတွင် သိမ်းဆည်းထားသော state တန်ဖိုးမှ အချက်အလက် တစ်ခုတည်းသော အပိုင်းကို မည်သို့ထုတ်ယူရမည်ကို သိရှိပြီး applicaiton ကြီးထွားလာသည်နှင့်အမျှ ကုဒ်များကို ထပ်ခါတလဲလဲ ရေးသားခြင်းမှ ရှောင်ရှားရန် ကူညီပေးပါသည်။ ဤ function သည် input အဖြစ် state ကို လက်ခံပြီး output အဖြစ် လိုအပ်သော state slice ကို ထုတ်ပေးပါသည်။ ဥပမာအားဖြင့် ဤကဲ့သို့ဖြစ်သည်။
const selectValue = state => state.some.value
ကျောင်းသုံးစာအုပ်၏ အစောပိုင်းတွင် ဖော်ပြခဲ့သည်မှာ
store တွင် getState method ရှိသည်။ ထို့ကြောင့်
ကျွန်ုပ်တို့သည် state ၏ တန်ဖိုးကို ရယူရန် ၎င်းကို
လွယ်ကူစွာအသုံးပြုနိုင်သည်။
const value = selectValue(store.getState())
ပြဿနာမှာ ကျွန်ုပ်တို့၏ React
components များသည် store သို့ တိုက်ရိုက်ဝင်ရောက်၍ မရခြင်းဖြစ်သည်။
အဘယ်ကြောင့်ဆိုသော် component ၏ file ထဲသို့ ၎င်းကို import လုပ်ခြင်းကို
တားမြစ်ထားသောကြောင့်ဖြစ်သည်။ သို့သော် React-Redux hook ဖြစ်သော
useSelector ကို အသုံးပြု၍ component ထဲတွင် အချက်အလက်များကို
ရယူနိုင်သော အခွင့်အရေးရှိသည်။ ထို့အပြင်
ဤ hook နှင့် ကျွန်ုပ်တို့၏ components များသည် အမြဲတမ်း
လက်ရှိအချိန်နှင့်သက်ဆိုင်သော အချက်အလက်များကိုသာ ရရှိမည်ဖြစ်သည်။
const count = useSelector(selectValue)