Redux හි නිෂ්පාදන පිටුව

මෙම පාඩමෙන් අපි නිශ්චිත නිෂ්පාදනයක් සඳහා තොරතුරු ප්‍රදර්ශනය කිරීම සඳහා වෙන් කළ පිටුවක් සාදන්නෙමු.

අපගේ නිෂ්පාදන ඇප් එක විවෘත කර products ෆෝල්ඩරය තුළ ProductPage.jsx නම් ගොනුවක් සාදමු. ඔබට මතක ඇති පරිදි, අපගේ සෑම නිෂ්පාදනයකටම අනන්‍ය හැඳුනුම්පත (id) එකක් ඇත. මෙම හැඳුනුම්පත හේතුවෙන් අපට සෑම නිෂ්පාදනයක් සඳහාම අනන්‍ය URL යොමුවක් ජනනය කළ හැකිය. සම්ප්‍රදායිකව එය මෙසේ දිස්වනු ඇත: /products/id123. එහි ගතික කොටස තුළ හැඳුනුම්පත අඩංගු වනු ඇත (යොමුව පිළිබඳව අපි ටිකක් පසුව සලකා බලමු).

එහෙනම්, අපි ProductPage.jsx හි හිස් ProductPage කොම්පෝනන්තයක් සාදමු:

export const ProductPage = () => {}

මෙහිදී අපි කරන පළමු කාර්යය වන්නේ useParams හුක් එක භාවිතා කරමින්, අප සිටින නිෂ්පාදන පිටුව සඳහා URL හි ගතික කොටස ලබා ගැනීමයි:

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

ඊළඟට, ලබාගත් හැඳුනුම්පත භාවිතයෙන් අපි අවශ්‍ය නිෂ්පාදනය products ස්ලයිසය තුළ store එකේ සොයමු, අපට දැනටමත් හුරුපුරුදු useSelector හුක් එක භාවිතා කරමින්:

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

ගොනුවට හුක් දෙකම ආයාත කිරීමට අමතක නොකරන්න:

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

අපට අවශ්‍ය නිෂ්පාදනය හමු නොවන්නේ නම් (උදාහරණයක් ලෙස, පරිශීලකයා වැරදි ලිපිනයක් ඇතුළත් කළේ නම්), එය ගැන තොරතුරු තිරය මත ප්‍රදර්ශනය කරමු. මෙම අදියරේදී, ProductPage කොම්පෝනන්තය සඳහා කේතය මෙලෙස පෙනෙනු ඇත:

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>
	}
}

අපට ඉතිරිව ඇත්තේ ලබාගත් නිෂ්පාදන දත්ත පිටු සැකසුමේ ප්‍රදර්ශනය කිරීම පමණි:

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 හුක් එක වන useSelector භාවිතා කරමින්, පාඩමේ දැක්වෙන පරිදි අවශ්‍ය ශිෂ්‍ය තොරතුරු ලබා ගන්න.

කොම්පෝනන්තය තුළ ලබාගත් ශිෂ්‍ය තොරතුරු තිරය මත ප්‍රදර්ශනය කරන්න.