Redux-এ বিক্রেতার পৃষ্ঠা

এখন খুব কমই বাকি আছে। এই সেশনে আসুন শেষ জিনিসটি করি - আমাদের অ্যাপ্লিকেশনে প্রতিটি বিক্রেতার জন্য একটি পৃথক পৃষ্ঠা যোগ করি। এখানে শুধুমাত্র আপনার পরিচিত ক্রিয়াগুলো থাকবে। চলুন শুরু করি।

আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলুন, এবং সেখানে sellers ফোল্ডারটি খুলুন। এই ফোল্ডারে একটি ফাইল তৈরি করুন SellerPage.jsx। এখন আমাদের কম্পোনেন্টের জন্য SellerPage কোড লিখতে শুরু করি:

export const SellerPage = () => {}

প্রথমে বিক্রেতার id নেওয়া যাক এবং এর মাধ্যমে স্লাইসে প্রয়োজনীয় বিক্রেতার অবজেক্টটি খুঁজে বের করি:

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-এর জন্য কোডে মার্কআপটি রিটার্ন করব: বিক্রেতার নাম সহ একটি শিরোনাম এবং পণ্যের তালিকা যা এই বিক্রেতা পোস্ট করেছে:

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

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

অবশ্যই আমাদের বিক্রেতা পৃষ্ঠার জন্য একটি রাউট দরকার। আসুন App.jsx ফাইলটি খুলুন এবং এটি চাইল্ড রাউটগুলির শেষে যোগ করুন:

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

SellersPage.jsx এবং App.jsx-এ প্রয়োজনীয় হুক এবং কম্পোনেন্টগুলি ইম্পোর্ট করতে ভুলবেন না।

আসুন আমাদের অ্যাপ্লিকেশন চালু করি, পণ্যগুলি লোড করি, তারপর বাম মেনুতে 'Sellers' লিঙ্কে ক্লিক করি। এখন আমরা যেকোনো বিক্রেতার পৃষ্ঠায় যেতে পারি, তার নামে ক্লিক করে, তারপর তার পৃষ্ঠায় তার সমস্ত পণ্য দেখতে পারি। এবং, তার যেকোনো পণ্যে ক্লিক করে, সেই পণ্যের পৃষ্ঠায় যেতে পারি।

এখনই এর জন্য শেষ। আমরা একটি অ্যাপ্লিকেশন তৈরি করতে Redux-এর বেসিক শিখেছি এবং এমনকি একটু গভীরেও গিয়েছি। বিভিন্ন দরকারী টুলের সাথে পরিচিত হয়েছি। আপনার Redux অ্যাপ্লিকেশন তৈরি করতে শুভকামনা!

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন। পাঠের উপকরণগুলি অধ্যয়ন করে, teachers ফোল্ডারে TeacherPage.jsx ফাইল তৈরি করুন। TeacherPage কম্পোনেন্টের কোডে প্রয়োজনীয় শিক্ষকের অবজেক্ট পান এবং এই শিক্ষকের সমস্ত শিক্ষার্থী পান। map ব্যবহার করে তাদের থেকে একটি তালিকা তৈরি করুন, প্রতিটি শিক্ষার্থীর পুরো নাম যেন সেই শিক্ষার্থীর পৃষ্ঠায় একটি লিঙ্ক হয়।

রিটার্ন করা মার্কআপে শিক্ষকের পুরো নাম সহ একটি শিরোনাম থাকুক, এর নিচে একটি ছোট শিরোনাম থাকুক - তিনি যে বিষয় পড়ান তার সাথে, এবং আরও নিচে তার শিক্ষার্থীদের তালিকা থাকুক।

App.jsx-এ শিক্ষকের পৃষ্ঠার জন্য আরও একটি চাইল্ড রাউট সংযোগ দিন।

আপনার অ্যাপ্লিকেশন চালু করুন এবং নিশ্চিত করুন যে সবকিছু কাজ করছে।