Redux တွင် ထုတ်ကုန်အတွက် စာမျက်နှာ

ဤသင်ခန်းစာတွင် ထုတ်ကုန်တစ်ခုချင်းစီအတွက် အချက်အလက်များ ဖော်ပြရန် သီးခြားစာမျက်နှာတစ်ခု ပြုလုပ်ပါမည်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ အက်ပ်ကို ဖွင့်ပြီး products ဖိုလ်ဒါအတွင်း ProductPage.jsx ဖိုင်ကို ဖန်တီးပါမည်။ သင်မှတ်မိသည့်အတိုင်း ကျွန်ုပ်တို့၏ ထုတ်ကုန်တိုင်းတွင် ထူးခြားသော id တစ်ခု ရှိပါသည်။ ဤ id ကို အသုံးပြု၍ ထုတ်ကုန်တစ်ခုချင်းစီအတွက် သီးခြား URL လိပ်စာကို ထုတ်လုပ်နိုင်မည် ဖြစ်သည်။ ပုံမှန်အားဖြင့် ၎င်းသည် ဤကဲ့သို့ပုံစံ ရှိလိမ့်မည်- /products/id123။ ၎င်း၏ dynamic part (လမ်းကြောင်းကို ကျွန်ုပ်တို့ နောက်မှ လုပ်ဆောင်မည်) အတွင်း id ကို ထည့်သွင်းထားမည် ဖြစ်သည်။

ထို့ကြောင့် ProductPage.jsx ဖိုင်တွင် ProductPage component ကို ဖန်တီးပါမည်-

export const ProductPage = () => {}

ဤနေရာတွင် ပထမဆုံးလုပ်ဆောင်မည့်အရာမှာ ကျွန်ုပ်တို့ရောက်ရှိနေသော ထုတ်ကုန်စာမျက်နှာ၏ URL ၏ dynamic part ကို ထုတ်ယူရန် useParams hook ကို အသုံးပြုခြင်း ဖြစ်သည်-

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

ထို့နောက် store အတွင်းရှိ products slice တွင် ရရှိလာသော id ကို အသုံးပြု၍ လိုအပ်သော ထုတ်ကုန်ကို ကျွန်ုပ်တို့ ရင်းနှီးပြီးဖြစ်သော useSelector hook ကို အသုံးပြု၍ ရှာဖွေပါမည်-

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

ဖိုင်အတွင်းသို့ hook နှစ်ခုလုံးကို import လုပ်ရန် မမေ့ပါနှင့်-

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

အကယ်၍ ကျွန်ုပ်တို့လိုအပ်သော ထုတ်ကုန်ကို မတွေ့ရှိပါက (ဥပမာ- အသုံးပြုသူက မမှန်ကန်သော လိပ်စာကို ရိုက်ထည့်ခြင်း)၊ ထိုအခါ ကျွန်ုပ်တို့သည် ထိုအကြောင်းအရာကို စခရင်၌ ဖော်ပြပါမည်။ ဤအဆင့်တွင် ProductPage component အတွက် code သည် ဤကဲ့သို့ပုံစံ ဖြစ်သင့်သည်-

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

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

	if (!product) {
		return <p>No such product</p>
	}
}

ရရှိလာသော ထုတ်ကုန် အချက်အလက်များကို markup အတွင်း ဖော်ပြရန်သာ ကျန်ရှိပါသည်-

return (
	<div>
		<h2>{product.name}</h2>
		<p>Description: {product.desc}</p>
		<p>Price: {product.price}</p>
		<p>Amount:{product.amount}</p>
	</div>
)

သင့် ကျောင်းသားများ အက်ပ်ကို ဖွင့်ပါ။ students ဖိုလ်ဒါအတွင်း StudentPage.jsx ဖိုင်ကို ဖန်တီးပါ၊ ထိုဖိုင်တွင် ရွေးချယ်ထားသော ကျောင်းသားနှင့် ပတ်သက်သည့် အချက်အလက်များကို ရယူပြီး ဖော်ပြပါမည်။

သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း react-redux hook useSelector ကို အသုံးပြု၍ ကျောင်းသားနှင့် ပတ်သက်သည့် လိုအပ်သော အချက်အလက်များကို ရယူပါ။

ရရှိလာသော ကျောင်းသားအချက်အလက်များကို component အတွင်း စခရင်ပေါ်တွင် ဖော်ပြပါ။