Redux-এ action অবজেক্টের জন্য ডেটা প্রস্তুত করা

সম্প্রতি আমরা আপনার সাথে আলোচনা করেছি যে ফাংশন createSlice একটি আর্গুমেন্ট আশা করে যখন action.payload তৈরি করা হয়। একদিকে এটি এর ব্যবহার সহজ করে, অন্যদিকে অবজেক্ট action-এর বিষয়বস্তু প্রস্তুত করার জন্য অতিরিক্ত পদক্ষেপের প্রয়োজন হতে পারে।

আসুন আমাদের পণ্য অ্যাপ্লিকেশন খুলি, এবং এতে NewProductForm.jsx ফাইলটি। নিম্নলিখিত কোড লাইনে মনোযোগ দিন:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

এখানে আমরা payload অবজেক্ট সরাসরি React কম্পোনেন্টে একত্রিত করি এবং এটিকে action productAdded-এ পাঠাই। কিন্তু যদি আমাদের একই action একাধিক কম্পোনেন্ট থেকে পাঠাতে হয় বা组装 করার যুক্তি জটিল হয়ে ওঠে? তত্ত্ব অনুসারে, আমাদের কম্পোনেন্টের কীভাবে payload অবজেক্টটি দেখায় সে বিষয়ে indifferent হওয়া উচিত। এছাড়াও আমরা কোডের ধ্রুবক নকল করতে অসন্তুষ্ট।

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

{reducer, prepare}

আসুন আমাদের productsSlice.js ফাইলটি খুলি এবং reducer productAdded-এর কোড পরিবর্তন করি। এখন কোডের এই অংশ:

productAdded(state, action) {
	state.push(action.payload)
},

আমরা নিম্নলিখিতটিতে পরিবর্তন করব, যেখানে ফাংশন reducer store-এ state আপডেট করার দায়িত্ব নেবে, এবং prepare - payload অবজেক্ট ফেরত দেবে জেনারেট করা id সহ এবং আমাদের অন্যান্য ডেটা:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

যেহেতু এখন আমরা id জেনারেট করব এখানে, কম্পোনেন্টে নয়, আসুন ইম্পোর্টে nanoid যোগ করি:

import { createSlice, nanoid } from '@reduxjs/toolkit'

শেষ পর্যন্ত, আসুন পরিবর্তন করি NewProductForm.jsx-এ। লাইনটির পরিবর্তে:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

আমাদের কাছে এমনটি থাকবে, যেখানে আমরা সহজভাবে কমা দিয়ে প্রয়োজনীয় ডেটা পাঠাব (এই ফাইলে ইম্পোর্ট থেকে nanoid অপসারণ করতে ভুলবেন না):

dispatch(productAdded(name, desc, price, amount))

আসুন অ্যাপ্লিকেশন চালু করি, তারপর একটি নতুন পণ্য তৈরি করি এবং নিশ্চিত করি যে আমরা কিছুই ভাঙিনি।

আপনার ছাত্রদের অ্যাপ্লিকেশন খুলুন। StudentsSlice.js ফাইলে আপনার reducer studentAdded পুনরায় লিখুন যাতে এটি {reducer, prepare} আকারের অবজেক্ট হয়, যেমন পাঠে দেখানো হয়েছে।

NewStudentForm.jsx ফাইলে সংশ্লিষ্ট পরিবর্তন করুন, যেমন পাঠে দেখানো হয়েছে। অ্যাপ্লিকেশন চালু করুন এবং নিশ্চিত করুন, যে সবকিছু আগের মতো কাজ করে।