Redux හි වෙළෙන්දා පිටුව

කරන්න ඉතිරිව ඇත්තේ සුළු කාරියක් පමණි. අපි මෙම පාඩමෙන් අවසාන දෙය කරමු - අපගේ යෙදුමට සෑම වෙළෙන්දෙකු සඳහාම වෙනම පිටුවක් එකතු කිරීමයි. මෙහි දැනටමත් ඔබට හුරුපුරුදු ක්‍රියාමාර්ග පමණක් ඇත. අපි ආරම්භ කරමු.

අපගේ නිෂ්පාදන සමඟ යෙදුම විවෘත කරමු, එහි sellers ෆෝල්ඩරය තුළ. මෙම ෆෝල්ඩරය තුළ SellerPage.jsx ගොනුව සාදමු. දැන් අපගේ කොම්පෝනන්ටය සඳහා SellerPage කේතය ලිවීම ආරම්භ කරමු:

export const SellerPage = () => {}

පළමුව, වෙළෙන්දාගේ id ලබාගෙන එම id භාවිතා කරමින් slice එක තුළ අවශ්‍ය වෙළෙන්දාගේ වස්තුව සොයා ගනිමු:

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 සඳහා කේතය අවසානයේ, අපි HTML ව්‍යුහය ආපසු එවන්නෙමු: වෙළෙන්දාගේ නම සහිත ශීර්ෂය සහ මෙම වෙළෙන්දා විසින් ඉදිරිපත් කරන ලද නිෂ්පාදන ලැයිස්තුව:

return (
	<div>
	<h2>වෙළෙන්දා: {seller.name}</h2>

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

ඇත්ත වශයෙන්ම, වෙළෙන්දා පිටුව සඳහා අපට මාර්ගයක් ද අවශ්‍යය. අපි App.jsx ගොනුව විවෘත කර එය අවසාන දරු මාර්ගය ලෙස එකතු කරමු:

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

SellersPage.jsx සහ App.jsx හි අවශ්‍ය hooks සහ කොම්පෝනන්ට import කිරීමට අමතක නොකරන්න.

අපගේ යෙදුම දියත් කරමු, නිෂ්පාදන පූරණය කරමු, ඉන්පසු වම් පස මෙනුවේ ඇති 'වෙළෙන්දෝ' සබැඳිය ක්ලික් කරමු. දැන් අපට ඕනෑම වෙළෙන්දෙකුගේ පිටුවට යා හැකිය, ඔහුගේ නම ක්ලික් කිරීමෙන්, ඉන්පසු ඔහුගේ පිටුවේ ඔහුගේ සියලුම නිෂ්පාදන දැකගත හැකිය. ඔහුගේ ඕනෑම නිෂ්පාදනයක් මත ක්ලික් කිරීමෙන්, එම නිෂ්පාදනයේ පිටුවට යා හැකිය.

මේ වන විට සියල්ල අවසන්. යෙදුම් නිර්මාණය කිරීම සඳහා Redux හි පදනම් අපි අධ්‍යයනය කර ඇති අතර තරමක් ගැඹුරට ද ගියෙමු. විවිධ ප්‍රයෝජනවත් මෙවලම් සමඟ ද හඳුනාගත්තෙමු. ඔබගේ Redux යෙදුම් නිර්මාණය කිරීමේ දී වාසනාවන්ත වන්නැයි මම ප්‍රාර්ථනා කරමි!

ඔබගේ ශිෂ්‍යයින් සමඟ යෙදුම විවෘත කරන්න. පාඩම් ආශ්‍රිත ද්‍රව්‍ය අධ්‍යයනය කිරීමෙන් පසු, teachers ෆෝල්ඩරය තුළ TeacherPage.jsx ගොනුව සාදන්න. කොම්පෝනන්ටයේ TeacherPage කේතය තුළ, අවශ්‍ය ගුරුවරයාගේ වස්තුව සහ මෙම ගුරුවරයාගේ සියලුම ශිෂ්‍යයින් ලබා ගන්න. map භාවිතා කරමින් ඔවුන්ගෙන් ලැයිස්තුවක් සාදන්න, සෑම ශිෂ්‍යයෙකුගේම සම්පූර්ණ නම එම ශිෂ්‍යයාගේ පිටුවට සබැඳියක් වීමට ඉඩ හරින්න.

ආපසු එවන ලද HTML ව්‍යුහය තුළ ඔබ සතුව තිබිය යුත්තේ ගුරුවරයාගේ සම්පූර්ණ නම සහිත ශීර්ෂයක්, පහළින් කුඩා ශීර්ෂයක් - ඔහු ඉගැන්වූ විෂය සමඟ, ඊටත් පහළින් ඔහුගේ ශිෂ්‍යයින්ගේ ලැයිස්තුවක්.

App.jsx හි ගුරුවරයා සඳහා වෙනත් දරු මාර්ගයක් සම්බන්ධ කරන්න.

ඔබගේ යෙදුම දියත් කර සියල්ල සාර්ථකව ක්‍රියාත්මක වන බවට විශ්වාස කරන්න.