Redux-এ পণ্যের পৃষ্ঠা

এই পাঠে আমরা একটি নির্দিষ্ট পণ্যের তথ্য প্রদর্শনের জন্য একটি পৃথক পৃষ্ঠা তৈরি করব।

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন এবং ফোল্ডারে products ফাইল তৈরি করুন ProductPage.jsx। যেমন আপনি মনে রাখবেন, আমাদের প্রতিটি পণ্যের একটি অনন্য id আছে। এই id এর সাহায্যে আমরা প্রতিটি পণ্যের জন্য একটি অনন্য URL তৈরি করতে সক্ষম হব। ঐতিহ্যগতভাবে এটি দেখতে হবে এমন: /products/id123। এবং id থাকবে এর G‡KKvR অংশে (আমরা কিছুক্ষণ পরে রাউটিং নিয়ে কাজ করব)।

সুতরাং, আসুন ProductPage.jsx-এ创建一个 খালি কম্পোনেন্ট ProductPage:

export const ProductPage = () => {}

আমরা এখানে প্রথম যা করব তা হল হুক useParams ব্যবহার করা, যে পণ্য পৃষ্ঠায় আছি তার URL-এর G‡KKvR অংশটি পেতে:

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

এরপর প্রাপ্ত id ব্যবহার করে আমরা store-এ products স্লাইসে প্রয়োজনীয় পণ্যটি খুঁজব, আমাদের পরিচিত হুক 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-এর সাহায্যে শিক্ষার্থী সম্পর্কে প্রয়োজনীয় তথ্য পান, যেমন পাঠে দেখানো হয়েছে।

কম্পোনেন্টে প্রাপ্ত শিক্ষার্থীর তথ্য স্ক্রিনে প্রদর্শন করুন।