Redux অ্যাপ্লিকেশনে action প্রেরণ

এখন আমাদের কাছে প্রতিক্রিয়া স্লাইস আপডেট করার জন্য রিডিউসার রয়েছে। এখন আমাদের প্রয়োজন action প্রেরণ যোগ করা, যা ব্যবহারকারী প্রতিক্রিয়া বাটনে ক্লিক করলে ট্রিগার হবে। কিন্তু আগে, যাতে সব সম্পূর্ণভাবে কাজ করে, আমাদের কয়েকটি পরিবর্তন আনতে হবে।

আসুন আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলি, এবং এতে productsSlice.js ফাইলটি। initialState এর সংজ্ঞাটি দেখুন। দেখতে পাচ্ছেন? অবজেক্টগুলিতে প্রতিক্রিয়া সহ কোনও বৈশিষ্ট্য নেই। আসুন এটি ঠিক করি, প্রতিটি প্রতিক্রিয়ার কাউন্টার 0 এ সেট করে:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

ইনিশিয়ালাইজেশনের জন্য দ্বিতীয় অবজেক্টে নিজে থেকে reactions বৈশিষ্ট্যটি যোগ করুন। productAdded রিডিউসারের জন্য নীচের কোডেও আমাদের এই বৈশিষ্ট্যটি যোগ করা প্রয়োজন, যাতে নতুন পণ্যগুলিতেও এই কার্যকারিতা থাকে। আসুন এটির prepare মেথডের জন্য এটি করি:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

এখন action প্রেরণ শুরু করি। UserReactions.jsx ফাইলটি খুলি, তারপর এতে useDispatch হুক এবং reactionClicked ইম্পোর্ট করি:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

UserReactions ফাংশনের বডিতে কোডের শুরুতে প্রথম লাইন হিসাবে (const userReactions ... এর আগে) লিখি:

const dispatch = useDispatch()

এবং প্রতিক্রিয়া বাটনে ক্লিক করলে reactionClicked প্রেরণ যুক্ত করি, এক্ষেত্রে পণ্যের id এবং যে প্রতিক্রিয়ায় ক্লিক করা হয়েছে তার নাম পাঠানো হবে:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

এখন আমাদের বাকি আছে আমাদের পৃষ্ঠাগুলির জন্য লেআউটে প্রতিক্রিয়া সহ কম্পোনেন্টটি দেখানো। এটি ProductsList.jsx ফাইলে Link এলিমেন্টের আগে করি:

<UserReactions product={product} />

এবং ঠিক একইভাবে পণ্য পৃষ্ঠায় Link এলিমেন্টের আগে ProductPage.jsx ফাইলে:

<UserReactions product={product} />

এখন, যখন সবকিছু নিজ নিজ স্থানে চলে এসেছে, আমরা আমাদের অ্যাপ্লিকেশন চালু করতে পারি। প্রতিক্রিয়া বাটনে ক্লিক করে দেখি। আমরা একটি নতুন পণ্য যোগ করতে পারি এবং সেগুলিতেও ক্লিক করতে পারি। এখন, আমরা যেখানেই প্রতিক্রিয়া বাটনে ক্লিক করি না কেন, পরিবর্তিত মানগুলি সব পৃষ্ঠায় এই পণ্যের জন্য দেখানো হবে। আলাদা পণ্যের পৃষ্ঠা (যেখানে আপনি প্রতিক্রিয়ায় ক্লিক করেছেন) এবং তাদের তালিকা সহ পৃষ্ঠা দেখুন এবং বিপরীতভাবে, সব পৃষ্ঠার জন্য একটি নির্দিষ্ট পণ্যের প্রতিক্রিয়ার সংখ্যা একই হবে।

এই পাঠটি Redux-এ ডেটা নিয়ে কাজ করার অধ্যায়ের শেষ ছিল। আমরা Redux store-এ ডেটা নিয়ে আরও গভীরভাবে কাজ করেছি এবং এখন জানি কিভাবে আমাদের প্রয়োজনীয় কার্যকারিতা অ্যাপ্লিকেশনে যোগ করতে হয় এবং React কম্পোনেন্টগুলিতে ডেটা ব্যবহার করতে হয়।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন। studensSlice.js ফাইলে ইনিশিয়ালাইজেশনের জন্য অবজেক্টগুলিতে সংশ্লিষ্ট ফিল্ড সহ votes বৈশিষ্ট্য যোগ করুন। studentAdded রিডিউসারের জন্যও এটি করুন।

UserVotes.jsx ফাইলে UserVotes ফাংশনের ভিতরে useDispatch হুকের জন্য dispatch সেট করুন এবং পাঠে দেখানো অনুরূপভাবে ভোট বাটনে ক্লিক করলে voteClicked action প্রেরণ করুন, এটিকে শিক্ষার্থীর id এবং vote এর নাম পাঠান।

StudentsList এবং StudentPage কম্পোনেন্টগুলির জন্য লেআউটে ভোটিং বাটনগুলি দেখান।