Redux တွင် ရောင်းချသူစာမျက်နှာ

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

ကျွန်ုပ်တို့၏ ကုန်ပစ္စည်း application ကို ဖွင့်ပါ၊ ထို့အတွင်း sellers ဖိုင်တွဲထဲသို့ ဝင်ပါ။ ထိုဖိုင်တွဲထဲတွင် SellerPage.jsx ဖိုင်ကို ဖန်တီးပါမည်။ ယခု ကျွန်ုပ်တို့၏ component အတွက် SellerPage ကုဒ်ကို စရေးပါမည်။

export const SellerPage = () => {}

အစတွင် ရောင်းချသူ၏ id ကိုရယူပါ၊ ၎င်းအသုံးပြု၍ slice ထဲရှိ လိုအပ်သော ရောင်းချသူ object ကို ရှာပါမည်။

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

ထို့နောက် အောက်ရှိ SellerPage အတွက် ကုဒ်ထဲတွင် ရောင်းချသူရရှိပြီးနောက် ကုန်ပစ္စည်းအားလုံးကို ရယူပါ၊ ထို့နောက် ထိုကုန်ပစ္စည်းများထဲမှ ၎င်းရောင်းချသူမှ တင်သွင်းထားသော ကုန်ပစ္စည်းများကိုသာ ရွေးချယ်ပါမည်။

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

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

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

နောက်ဆုံးတွင် SellerPage အတွက် ကုဒ်၏အဆုံးတွင် markup ကို return ပြန်ပါမည်။ ရောင်းချသူ၏ အမည်ပါသော ခေါင်းစဉ်နှင့် ထိုရောင်းချသူမှ တင်သွင်းထားသော ကုန်ပစ္စည်းများ၏ စာရင်း။

return (
	<div>
	<h2>Seller: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

ဟုတ်ပါပြီ၊ ကျွန်ုပ်တို့အတွက် ရောင်းချသူစာမျက်နှာ အတွက် route တစ်ခု လိုအပ်ပါသေးသည်။ App.jsx ဖိုင်ကို ဖွင့်ပြီး ၎င်းကို child route များ၏ နောက်ဆုံးတွင် ထည့်သွင်းပါမည်။

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

SellersPage.jsx နှင့် App.jsx တို့ထဲသို့ လိုအပ်သော hook များနှင့် component များကို import လုပ်ရန် မမေ့ပါနှင့်။

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

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

သင်၏ ကျောင်းသားများ application ကို ဖွင့်ပါ။ သင်ခန်းစာ ပစ္စည်းများကို လေ့လာပြီးနောက်၊ teachers ဖိုင်တွဲထဲတွင် TeacherPage.jsx ဖိုင်ကို ဖန်တီးပါ။ TeacherPage component ၏ ကုဒ်ထဲတွင် လိုအပ်သော ဆရာ object နှင့် ထိုဆရာ၏ ကျောင်းသားအားလုံးကို ရယူပါ။ map ကို အသုံးပြု၍ ၎င်းတို့မှ စာရင်းတစ်ခု ဖန်တီးပါ၊ ကျောင်းသားတစ်ဦးစီ၏ အမည်သည် ထိုကျောင်းသား၏ စာမျက်နှာသို့ လင့်ခ်တစ်ခု ဖြစ်ပါစေ။

return ပြန်သော markup ထဲတွင် ဆရာ၏ အမည်ပါသော ခေါင်းစဉ်၊ အောက်တွင် ပိုသေးသော ခေါင်းစဉ် - ၎င်းသင်ကြားသော ဘာသာရပ်နှင့်၊ ထို့အောက်တွင် ၎င်း၏ ကျောင်းသားများ စာရင်း ပါဝင်ပါစေ။

App.jsx ထဲတွင် ဆရာစာမျက်နှာအတွက် child route တစ်ခုထပ်မံ ချိတ်ဆက်ပါ။

သင်၏ application ကို စတင်လည်ပတ်ပြီး အားလုံး အလုပ်လုပ်သည်ကို သေချာစေပါ။