Redux-এ বিক্রেতাদের তালিকা

গত ক্লাসে আমরা মূল উপাদানগুলি শেষ করেছি। এখন thunk-এর সাহায্যে আমরা সার্ভার থেকে পণ্যের তালিকা পাই এবং সার্ভারে একটি নতুন পণ্য সংরক্ষণ করতে পারি। চলুন বিক্রেতাদের বিষয়ে বুঝে নেওয়া যাক। সর্বোপরি, আমরা তাদের জন্যও ডেটা পাই। চলুন বিক্রেতাদের তালিকা সহ একটি আলাদা পৃষ্ঠা তৈরি করি।

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন, এবং এটির ভিতরে sellers ফোল্ডারটি। এই ফোল্ডারে SellersList.jsx ফাইল তৈরি করুন। এখানে আমরা useSelector, Link এবং selectAllSellers ব্যবহার করব, যার কোড আমরা sellersSlice.js-এ কিছুক্ষণ পরে লিখব:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

এরপর, আসুন SellersList নিজেই তৈরি করি। এতে আমরা useSelector হুক ব্যবহার করে সমস্ত বিক্রেতা পাব, তারপর map লুপে বিক্রেতাদের তালিকার জন্য মার্কআপ পাব, যেখানে প্রতিটি বিক্রেতার নাম তার নিজস্ব পৃষ্ঠায় নিয়ে যাবে। এবং শেষে একটি শিরোনাম এবং প্রাপ্ত তালিকা সহ মার্কআপ রিটার্ন করব:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Sellers:</h2>

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

এরপর, sellersSlice.js ফাইলটি খুলুন এবং productsSlice.js-তে সিলেক্টরগুলির অনুরূপ ফাইলের একদম শেষে রিডিউসার এক্সপোর্ট করার পরে দুটি সিলেক্টর তৈরি করুন:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

এখন আমাদের তালিকা পৃষ্ঠার জন্য রুট নির্ধারণ করতে হবে, এর জন্য App.jsx ফাইলটি খুলুন এবং চাইল্ড রুটগুলির অ্যারেতে children আরও একটি অবজেক্ট যোগ করুন (SellersList কম্পোনেন্টটি ইম্পোর্ট করতে ভুলবেন না):

{
	path: '/sellers',
	element: <SellersList />,
},

মেনুতে আমাদের 'Sellers' লিঙ্কটি কাজ করতে, চলুন root.jsx ফাইলটি খুলুন (কত দিন হয়ে গেল ... ) এবং a ট্যাগটি NavLink এলিমেন্ট দিয়ে প্রতিস্থাপন করুন:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

এবং শেষ জিনিস। আমাদের মেনুতে সক্রিয় লিঙ্কটি হাইলাইট করতে, এবং বুঝতে পারা যায় যে আমরা কোন পৃষ্ঠায় আছি, আমরা index.css-এ স্টাইল যোগ করব:

nav a.active {
	color: purple;
}

আসুন আমাদের অ্যাপ্লিকেশন চালু করি। এখন আমরা মেনুতে 'Sellers'-এ ক্লিক করে বিক্রেতাদের পৃষ্ঠায় যেতে পারি। অবশ্যই, তার আগে মেনুতে 'Products'-এ ক্লিক করতে হবে, অন্যথায় আমাদের পণ্যগুলি লোড হবে না। পরবর্তী পাঠে, আমরা প্রতিটি বিক্রেতার জন্য একটি পৃষ্ঠা তৈরি করব এবং Redux-এর উপর এই টিউটোরিয়ালের শিক্ষা শেষ করব।

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

TeachersList কম্পোনেন্টের জন্য কোড লিখুন, এতে সমস্ত শিক্ষক পান এবং শিক্ষকদের তালিকা teachersToRender তৈরি করুন, যাতে এই তালিকার প্রতিটি লাইনে তাদের উপাধি এবং নামের আদ্যক্ষর প্রদর্শিত হয়, এবং বন্ধনীতে তারা যে বিষয় শেখান সেটি দেখানো হয়। প্রতিটি পুরো নাম একটি লিঙ্ক হোক, যা প্রতিটি শিক্ষকের জন্য আলাদা পৃষ্ঠায় নিয়ে যায়। তারপর কম্পোনেন্টের কোডের শেষে একটি শিরোনাম এবং তৈরি করা তালিকা সহ মার্কআপ রিটার্ন করুন।

teachersSlice.js ফাইলের শেষে পাঠে দেখানো হিসাবে দুটি সিলেক্টর ফাংশন selectAllTeachers এবং selectTeacherById তৈরি করুন।

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

root.jsx ফাইলের মেনুতে 'Teachers'-এর জন্য a ট্যাগটি NavLink দিয়ে প্রতিস্থাপন করুন, যেমনটি পাঠে দেখানো হয়েছে। নিশ্চিত করুন যে সক্রিয় লিঙ্কটি মেনুতে কিছুভাবে হাইলাইট হয়, এর জন্য index.css-এ স্টাইল যোগ করুন।