Redux-এ স্লাইস থেকে ডেটা পুনরায় ব্যবহার করা

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

আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলুন। এখন products ফোল্ডারে আরও একটি ফাইল তৈরি করা যাক SellerOfProd.jsx। শুরুতে useSelector হুকটি ইম্পোর্ট করি, যার সাহায্যে আমরা প্রয়োজনীয় পণ্য সহ স্লাইসটি পাব:

import { useSelector } from 'react-redux'

তারপর store থেকে প্রয়োজনীয় পণ্যটি নিষ্কাশন করি বিক্রেতার id অনুযায়ী, যা আমরা আমাদের নতুন কম্পোনেন্টে props হিসেবে পাঠাব:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

এবং যদি এমন বিক্রেতা থাকে, আমরা তার নাম ফেরত দেব, আর যদি না থাকে, তাহলে 'unknown' ফেরত দেব:

return <span>by {seller ? seller.name : 'unknown'}</span>

এখন আমাদের নতুন কম্পোনেন্টটি ProductsList.jsx-এ ইম্পোর্ট করা যাক এবং ProductsList ফাংশনে পণ্যের নামের শিরোনামের পরেই এটি বসাই। আপনি দেখতে পাচ্ছেন, আমরা এটিকে props হিসাবে id পাঠিয়েছি:

<SellerOfProd sellerId={product.seller} />

এখন,如果我们 আমাদের অ্যাপ্লিকেশন চালু করি, একটি নতুন পণ্য যোগ করি এবং তালিকায় এটি খুঁজে পাই, তাহলে আমরা দেখতে পাব যে এর একটি বিক্রেতা রয়েছে, এবং অ্যাপ্লিকেশন শুরুতে স্বয়ংক্রিয়ভাবে যোগ করা পণ্যগুলির জন্য 'unknown' থাকবে।

একটি ছোট বিচ্যুতি: যদি আপনার VS Code এডিটরে eslint sellerId-এ আপত্তি করে, কিন্তু অ্যাপ্লিকেশন কাজ করে, তাহলে আপনি এটিকে暂时 উপেক্ষা করতে পারেন বা আপনার অ্যাপ্লিকেশনের .eslintrc.cjs ফাইলটি খুলে rules-এ "react/prop-types": "off" যোগ করতে পারেন।

স্বভাবতই, আমরা চাই বিক্রেতার তথ্য পণ্যের পৃষ্ঠাতেও যোগ করতে। এর জন্য ProductPage-এর লেআউটে পণ্যের নামের শিরোনামের পরে আবার এই লাইনটি বসাই এবং পরীক্ষা করে দেখি যে সব কাজ করছে:

<SellerOfProd sellerId={product.seller} />

আপনার শিক্ষার্থীদের নিয়ে অ্যাপ্লিকেশনটি খুলুন। পাঠের উপাদানটি অধ্যয়ন করে, students ফোল্ডারে TeacherForStudent কম্পোনেন্টের জন্য একটি ফাইল তৈরি করুন। ফলস্বরূপ কম্পোনেন্টটিকে অবশ্যই শিক্ষকের পূর্ণ নাম ফেরত দিতে হবে, এবং পাশের বন্ধনীতে তিনি যে বিষয় পড়ান। প্রয়োজনীয় শিক্ষক useSelector হুক ব্যবহার করে খুঁজে বের করুন। যদি এই শিক্ষার্থীর জন্য শিক্ষক না থাকে, তাহলে 'anonym' আউটপুট দিন।

পূর্ববর্তী কাজ থেকে প্রাপ্ত কম্পোনেন্ট ব্যবহার করে প্রতিটি শিক্ষার্থীর জন্য শিক্ষকের ডেটা শিক্ষার্থীদের তালিকা সহ পৃষ্ঠায় আউটপুট দিন।

পূর্ববর্তী কাজের মতোই করুন, কিন্তু একটি আলাদা শিক্ষার্থীর পৃষ্ঠার জন্য।