Redux store-এ পণ্যের তথ্য পরিবর্তন

আমরা পণ্য যোগ করতে শিখেছি, কিন্তু কি হবে যদি আমরা একটি পণ্যের তথ্য পরিবর্তন করতে চাই? এই এবং পরবর্তী পাঠে এটি কীভাবে করা যায় তা দেখা যাক।

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন এবং productsSlice.js ফাইলে যান। শুরু করা যাক এই থেকে যে আমাদের products স্লাইসের জন্য আরেকটি রিডিউসার লিখতে হবে, যা একটি পণ্য আপডেট করার সময় ট্রিগার হবে। এটির নাম দিন productUpdated এবং productAdded রিডিউসারের পরে reducers ফিল্ডে এটি যোগ করুন। এছাড়াও তাত্ক্ষণিকভাবে এটিকে প্যারামিটার হিসেবে state এবং action পাস করুন, যা ভিত্তি করে, যেমন আমরা মনে রাখি, রিডিউসার কাজ করে:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

এখন চিন্তা করা যাক, আমাদের কী কী তথ্যের প্রয়োজন হবে একটি পণ্য আপডেট করার জন্য। প্রথমত - এটি হল id, এর মাধ্যমে আমরা store-এ আমাদের আগ্রহের পণ্যটি খুঁজে পেতে সক্ষম হব। বাকি তথ্য - নাম, বিবরণ, মূল্য এবং পরিমাণ পরিবর্তনের জন্য আমাদের কাছে থাকবে। এই সমস্ত মান আমরা action অবজেক্টের payload প্রপার্টি থেকে পাব, যা আমাদের কাছে আসবে, এবং যদি আমরা এটি হাতে লিখতাম, তবে এটি নীচে দেখানো হিসাবে দেখাত। লক্ষ্য করুন যে প্রত্যাশিত মান payload প্রপার্টির - একটি আর্গুমেন্ট, তাই আমরা এখানে একটি অবজেক্ট পাস করব (এটি নিয়ে আমরা পরে আলোচনা করব):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

মূল puntos খুঁজে বের করে, এখন আমরা productUpdated-এর জন্য কোড লিখতে পারি কার্লি ব্র্যাকেটের মধ্যে। প্রথমে action অবজেক্ট থেকে পরিবর্তিত তথ্য নেওয়া যাক:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

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

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

যদি এমন পণ্য store-এ পাওয়া যায়, তবে আমরা এর তথ্য নতুন মান দিয়ে প্রতিস্থাপন করব:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

আমাদের শুধু action creatorটি রপ্তানি করতে হবে কম্পোনেন্টে ব্যবহারের জন্য, যা createSlice আমাদের জন্য তৈরি করবে। চলুন এটি ফাইলের শেষে রপ্তানির সাথে যোগ করি, বিদ্যমান productAdded-এর পাশাপাশি:

export const { productAdded, productUpdated } = productsSlice.actions

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। পাঠের উপাদান অধ্যয়ন করে, studentsSlice.js ফাইলে productsSlice-এর জন্য আরেকটি রিডিউসার লিখুন, যা ব্যবহারকারী দ্বারা পরিবর্তন করা হলে store-এ শিক্ষার্থীর তথ্য আপডেট করবে। এটির নাম দিন studentUpdated।

আর এই ক্ষেত্রে আপনার action অবজেক্টটি কেমন দেখাত? উত্তর হিসেবে এর কোড পাঠান।

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