Redux ရှိ Selectors များရယူခြင်း

အကြောင်းအရာတစ်ချို့ကို အတွင်းထဲထည့်သွင်းထားခြင်းနှင့် အပလီကေးရှင်းထဲက မလိုအပ်တဲ့ကုဒ်တွေကို ဖယ်ရှားခြင်းဟာ မကြာခဏအလွန်အသုံးဝင်ပါတယ်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များနှင့်အတူ အပလီကေးရှင်းကို ဖွင့်ကြည့်ကြပါစို့။ အပလီကေးရှင်း၏ နေရာအချို့တွင် selectors များကိုအသုံးပြု၍ လုပ်ဆောင်ချက်အချို့ပြုလုပ်ရန် ထုတ်ကုန်များ slice ကို ကျွန်ုပ်တို့ထုတ်ယူကြောင်း သတိပြုပါ။

ယခု ကျွန်ုပ်တို့၏ productsSlice.js ကိုဖွင့်ပြီး ဖိုင်အဆုံးသို့ဆင်းသွားကာ ကုဒ်စာကြောင်းအနည်းငယ်ထည့်မည်၊ ၎င်းတွင် selector နှစ်ခုရေးပြီး ၎င်းတို့ကို export လုပ်မည်။ ကျွန်ုပ်တို့တွင် function တစ်ခုသည် ထုတ်ကုန်အားလုံးကိုရယူရန် ဖြစ်သည်-

export const selectAllProducts = (state) => state.products.products

ထို့နောက် ၎င်းနောက်တွင် ဒုတိယ - id အလိုက် ထုတ်ကုန်တစ်ခုကိုရယူရန်-

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

သင်တို့၌ တရားသင့်သော မေးခွန်းပေါ်လာနိုင်သည် - ကျွန်ုပ်တို့တွင် ထိုကဲ့သို့သော အဆင့်မြင့်ဖွဲ့စည်းပုံ state.products.products ဟူ၍ မည်သို့ရှိသနည်း။ အဖြေရိုးရှင်းသည်၊ ကျွန်ုပ်တို့သည် ယခင်သင်ခန်းစာတွင် slice ၏ဖွဲ့စည်းပုံကိုပြောင်းလဲခဲ့ပြီး ယခုကျွန်ုပ်တို့၏ထုတ်ကုန်များသည် slice ၏သီးသန့်ဂုဏ်သတ္တိတစ်ခုဖြစ်သော products ၏ array တစ်ခုအနေဖြင့် ထုတ်ကုန်များ slice state.products (ဤနေရာတွင် state သည် slice အားလုံးပါဝင်သော Redux state ၏ root object ဖြစ်ကြောင်း မှတ်မိပါ) အတွင်း၌ရှိမည်ဖြစ်သည်။

ထို့ကြောင့် ကျွန်ုပ်တို့သည် selector functions များအတွက် ကုဒ်ကို အပလီကေးရှင်းအတွင်းရှိ တစ်နေရာတည်းသို့ ရွှေ့ပြောင်းခဲ့ပြီး ယခုကျွန်ုပ်တို့အသုံးပြုခဲ့သည့်နေရာများတွင် သက်ဆိုင်ရာပြောင်းလဲမှုများပြုလုပ်ရန်လိုအပ်သည်။ ကျွန်ုပ်တို့ ProductsList.jsx ဖိုင်မှစမည်။ ဤနေရာတွင် ထုတ်ကုန်အားလုံးကိုရယူရန်လိုအပ်သောကြောင့် ၎င်းအတွင်း selectAllProducts ကို import လုပ်မည်-

import { selectAllProducts } from './productsSlice'

ထို့ပြင် ProductsList function ၏ကုဒ်အစတွင်၊ ဤအရာကို အစားထိုးပါ-

const products = useSelector((state) => state.products)

ဤစာကြောင်းဖြင့်-

const products = useSelector(selectAllProducts)

ယခု ProductPage.jsx ဖိုင်သို့သွားကြမည်။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် id အလိုက် ထုတ်ကုန်တစ်ခုလိုအပ်ခဲ့သည်။ စာကြောင်းကို အစားထိုးကြမည် (import လုပ်ရန်မမေ့ပါနှင့်)-

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

ဤသို့ဖြင့်-

const product = useSelector((state) => selectProductById(state, productId))

သင်၏ကိုယ်ပိုင် EditProductForm.jsx ဖိုင်တွင်လည်း အလားတူအစားထိုးမှုပြုလုပ်ပါ။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် id အလိုက် ထုတ်ကုန်တစ်ခုလိုအပ်သည်။

ထိုသို့သော optimization သည် သင့်အတွက်အဆင်ပြေစေရန်သာဖြစ်ပြီး သင်လိုအပ်သည်ဟုထင်မြင်သောအခါနှင့် အဆင်ပြေသည်ဟုထင်မြင်သောအခါ ပြုလုပ်နိုင်သည်ကို မှတ်မိပါ။ ကျွန်ုပ်တို့၏ဥပမာတွင်၊ ကျွန်ုပ်တို့သည် selector function ၏ကုဒ်ကို အကြိမ်ကြိမ်နေရာအမျိုးမျိုးတွင်ရေးပြီး၊ ထို့နောက် state ၏ဖွဲ့စည်းပုံကိုပြောင်းလဲခဲ့ပါက၊ ၎င်းကို component အားလုံးတွင်ပြင်ဆင်ရမည်ဖြစ်သည်။

သင့်ကျောင်းသားများနှင့်အတူ အပလီကေးရှင်းကိုဖွင့်ပါ။ ၎င်းအတွင်း studentsSlice.js ဖိုင်ကိုဖွင့်ပါ။ ဖိုင်အဆုံးတွင် သင်ခန်းစာတွင်ပြထားသည့်အတိုင်း ကျောင်းသားအားလုံးကိုရယူရန် selectAllStudents နှင့် id အလိုက် ကျောင်းသားတစ်ဦးကိုရယူရန် selectStudentById selector နှစ်ခုကိုရေးပြီး export လုပ်ပါ။

ယခု selectAllStudents နှင့် selectStudentById ကို StudentsList.jsx၊ StudentPage.jsx နှင့် EditStudentForm.jsx ဖိုင်များသို့ import လုပ်ပါ၊ သင်ခန်းစာတွင်ပြထားသည့်အတိုင်း ထိုဖိုင်များတွင် သက်ဆိုင်ရာပြောင်းလဲမှုများပြုလုပ်ပါ။