Redux অ্যাপ্লিকেশনে অতিরিক্ত লজিক যোগ করা

এই সেশনে আমরা আমাদের অ্যাপ্লিকেশনে সর্বশেষ কম্পোনেন্টটি যোগ করব। আরও স্পষ্টভাবে বললে, আমরা পণ্যটিতে ব্যবহারকারীর প্রতিক্রিয়া যোগ করব, যিনি হয় এটি অর্ডার দিয়েছেন অথবা এটি সম্পর্কে তথ্য পড়েছেন।

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

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

এবং নীচে মূল ফাংশনটি লেখা শুরু করি, যার মধ্যে আমরা স্লাইস product পাস করব:

export const UserReactions = ({ product }) => {}

এখন কার্লি ব্র্যাকেটের মধ্যে UserReactions ফাংশনের বডি লিখি। এর জন্য map ব্যবহার করে আমাদের reactionObj-এর কী-ভ্যালু জোড়াগুলো traverse করব, প্রতিটির জন্য বাটনের জন্য একটি চিহ্ন পাব ('+', '+/-' বা '-') এবং একটি নির্দিষ্ট প্রতিক্রিয়ার সাংখ্যিক মান (এটি আমরা store-এ থাকা product থেকে প্রতিক্রিয়ার নাম দ্বারা বের করব):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

এবং তারপর ফাংশন কোডের শেষে বাটন userReactions সহ মার্কআপ রিটার্ন করব:

return <div>{userReactions}</div>

এবং index.css-এ আরও কিছু স্টাইল যোগ করব:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

যদি এটি কিছুটা বিভ্রান্তিকর মনে হয়, চিন্তা করবেন না, পরে এটি আপনার কাছে অনেক বেশি বোধগম্য হয়ে উঠবে।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। আপনার অ্যাপ্লিকেশনে ব্যবহারকারীদের জন্য শিক্ষার্থীদের মধ্যে থেকে গ্রুপ লিডার এবং স্পোর্টস টিম ক্যাপ্টেন নির্বাচন করার সুযোগ থাকবে। তাই, পাঠের উপকরণগুলি অধ্যয়ন করার পর, students ফোল্ডারে UserVotes.jsx ফাইল তৈরি করুন। ফাইলের শুরুতে votesObj অবজেক্ট তৈরি করুন, যেখানে আপনার দুটি প্রপার্টি থাকবে - leader এবং captain, যার মানগুলি হবে GL এবং TC, যা বাটনের জন্য চিহ্ন হিসেবে কাজ করবে।

ফাইলে অবজেক্ট votesObj-এর ডেফিনিশনের পরে UserVotes ফাংশনের কোড লিখুন, এই পাঠের উপকরণের অনুরূপ।