Redux တွင် Slice မှ အချက်အလက်များကို ထပ်ခါထပ်ခါ အသုံးပြုခြင်း

ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် ထုတ်ကုန်ထည့်သွင်းရန်ဖောင်သို့ ရောင်းချသူရွေးချယ်ရန် dropdown list ပါဝင်သော နောက်ထပ် field တစ်ခုထပ်ထည့်ခဲ့သည်။ ယခုကျွန်ုပ်တို့အနေဖြင့် application ၏ နေရာအမျိုးမျိုးတွင် ဤအချက်အလက်ကို ထပ်မံပြသရန်လိုအပ်သည်ဟု ယူဆပါစို့။ �င်းအတွက် ကျွန်ုပ်တို့သည် ကုဒ်ကိုအကြိမ်တိုင်း ကူးထည့်မည်မဟုတ်ဘဲ၊ slice မှ အချက်အလက်များကို ယူပြီး application ၏လိုအပ်သောနေရာများတွင် ပြသမည့် သီးခြား component တစ်ခုကို ဖန်တီးပါမည်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါဝင်သော application ကိုဖွင့်ပါ။ ယခု products ဖိုလ်ဒါတွင် ဖိုင် SellerOfProd.jsx ကိုဖန်တီးပါ။ အစပိုင်းတွင် ကျွန်ုပ်တို့လိုအပ်သော ထုတ်ကုန် slice ကိုရယူရန် အသုံးပြုမည့် useSelector hook ကို import လုပ်ပါမည်။

products/SellerOfProd.jsximport { useSelector } from 'react-redux'

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

products/SellerOfProd.jsxexport const SellerOfProd = ({ sellerId }) => {
  const seller = useSelector((state) =>
    state.sellers.find((seller) => seller.id === sellerId)
  )
}

အကယ်၍ ထိုသို့သောရောင်းချသူရှိပါက သူ၏နာမည်ကို return ပြန်ပါမည်။ မရှိပါက 'unknown' ကို return ပြန်ပါမည်။

products/SellerOfProd.jsxreturn <span>by {seller ? seller.name : 'unknown'}</span>

ယခု ကျွန်ုပ်တို့၏ component အသစ်ကို ProductsList.jsx သို့ import လုပ်ပြီး ProductsList function အတွင်း ထုတ်ကုန်နာမည်ပါခေါင်းစဉ်ပြီးတာနှင့် ချက်ချင်းထည့်ပါမည်။ မြင်တွေ့ရသည့်အတိုင်း ကျွန်ုပ်တို့သည် ၎င်းကို props အနေဖြင့် id ပေးပို့ခဲ့သည်။

products/ProductsList.jsx<SellerOfProd sellerId={product.seller} />

ယခု ကျွန်ုပ်တို့၏ application ကိုစတင်ပါက၊ ထုတ်ကုန်အသစ်ထပ်ထည့်ပြီး စာရင်းထဲတွင်ရှာပါက၊ ၎င်းတွင် ရောင်းချသူပါဝင်လာသည်ကို တွေ့ရမည်။ application စတင်သည်နှင့် အလိုအလျောက်ထည့်သွင်းထားသော ထုတ်ကုန်များတွင် 'unknown' ဖြစ်နေမည်။

အနည်းငယ်သွေဖည်သွားခြင်း - သင်၏ VS Code editor ရှိ eslint သည် sellerId ကို မနှစ်သက်သော်လည်း application အလုပ်လုပ်နေပါက �ခုအတွက် လျစ်လျူရှုထားနိုင်သည် သို့မဟုတ် သင်၏ application ၏ .eslintrc.cjs ဖိုင်ကိုဖွင့်ပြီး rules ထဲတွင် "react/prop-types": "off" ကိုထည့်နိုင်သည်။

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

products/ProductPage.jsx<SellerOfProd sellerId={product.seller} />