Redux অ্যাপ্লিকেশনে রিডিউসার যোগ করা

গত পাঠে, আমরা একটি UserReaction কম্পোনেন্ট তৈরি করেছিলাম যাতে প্রতিটি পণ্যের জন্য ব্যবহারকারীর প্রতিক্রিয়া থাকবে। এখন আমাদের একটি রিডিউসার লিখতে হবে, যা ব্যবহারকারী দ্বারা একটি প্রতিক্রিয়া বাটনে ক্লিক করা হলে প্রতিক্রিয়া কাউন্টার পরিচালনা করবে।

আসুন আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলি, এবং এটির মধ্যে productsSlice.js ফাইলটি সমস্ত রিডিউসার সহ। এখন reducers বৈশিষ্ট্যের মধ্যে আরেকটি রিডিউসার reactionClicked তৈরি করি (আমরা এটিকে প্রথমে রাখতে পারি - productAdded এর আগে, যদিও এটি কোন ব্যাপার না)। যথারীতি, এটিতে state এবং action প্যারামিটার পাস করি:

reactionClicked(state, action) {},

এবং এখন সেই কোঁকড়া বন্ধনীর ভিতরে, যা আমরা পূর্ববর্তী ধাপে খালি রেখেছিলাম, এর জন্য কোড লিখি। প্রথমত, আমরা পণ্যের আইডি নিষ্কাশন করব action অবজেক্টের payload থেকে এবং প্রতিক্রিয়ার নাম:

const { productId, reaction } = action.payload

তারপর প্রদত্ত স্টেট থেকে প্রয়োজনীয় পণ্যটি পাই:

const currentProduct = state.find(product => product.id === productId)

এবং যদি এমন পণ্য থাকে, তবে প্রদত্ত প্রতিক্রিয়ার মান 1 দ্বারা বাড়াই:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

এইতো, আমাদের জন্য reactionClicked কোড প্রস্তুত:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

আসুন ফাইলের শেষে প্রাপ্ত action creator রপ্তানি যোগ করি:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

এখানে দুটি গুরুত্বপূর্ণ বিষয় উল্লেখ করা প্রয়োজন। আপনি পূর্ববর্তী পাঠগুলি থেকে মনে রাখবেন - এইভাবে সরাসরি রিডিউসার কোডে মান আপডেট করা নিষিদ্ধ (এই লাইনটি দেখুন: reactions[reaction]++), কিন্তু আমাদের জন্য এটি কাজ করবে, কারণ আমরা এটি করি createSlice এর ভিতরে, যা ব্যবহার করে Immer লাইব্রেরি। এটি নিশ্চিত করবে যে আমাদের কোডটি মান আপডেট করার একটি "নিরাপদ" উপায়ে রূপান্তরিত হয়। এটি আমাদেরকে জটিল জিনিসগুলি লিখতে দেয় আরও সহজ উপায়ে।

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

আপনার শিক্ষার্থীদের সাথে অ্যাপ্লিকেশনটি খুলুন এবং studentsSlice.js ফাইলে আরেকটি রিডিউসার voteClicked যোগ করুন reducers ফিল্ডে, যেমন পাঠে দেখানো হয়েছে। এর জন্য কোড লিখুন। আপনার রিডিউসারের কাজ - ক্লিক করা হলে vote (বা ভোট) এর মান বৃদ্ধি করা, যেটিতে ক্লিক করা হয়েছে, প্রদত্ত শিক্ষার্থীর জন্য, 1 দ্বারা।

ফাইলের শেষে প্রাপ্ত action creator voteClicked রপ্তানি করতে ভুলবেন না।