Redux-এ কম্পোনেন্টে thunk-এর কাজের ফলাফল প্রদর্শন

পূর্ববর্তী ক্লাসে আমরা thunk addProduct ব্যবহার করে একটি POST-request প্রেরণ করেছি। এখন আসুন এর কাজের ফলাফল কম্পোনেন্টে প্রদর্শন করি।

আমাদের পণ্য অ্যাপ্লিকেশন খুলুন, এবং সেখানে NewProductForm.jsx ফাইলটি খুলুন, কারণ এই কম্পোনেন্টটি নতুন পণ্য যোগ করার জন্য দায়ী। ইম্পোর্ট লাইনগুলি দেখি। productAdded action-এর ইম্পোর্ট পরিবর্তন করে thunk addProduct ইম্পোর্ট করি:

import { addProduct } from './productsSlice'

এখন, যেহেতু আমরা স্লাইসে request-এর 'pending' status ট্র্যাক করছি না, তাই আসুন এমন করি যাতে ব্যবহারকারী পণ্য সংরক্ষণ বোতামে শুধুমাত্র একবার ক্লিক করতে পারে, কারণ আমাদের একই রকমের পুনরাবৃত্ত request-এর প্রয়োজন নেই। এর জন্য আমরা আরেকটি লোকাল state নিব:

const [requestStatus, setRequestStatus] = useState('idle')

এরপর handler-গুলির পরে এবং onSaveProductClick ফাংশনের আগে কোড লিখব, যেখানে আমরা পরীক্ষা করব ফর্মের সমস্ত ফিল্ড পূরণ করা হয়েছে কিনা এবং request-এর status কি 'idle' তে আছে:

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

তারপর আমরা onSaveProductClick-এর জন্য কোড পরিবর্তন করব। প্রথমত, এটি একটি অ্যাসিঙ্ক্রোনাস ফাংশন হবে এবং এটি executed হবে, যদি উপরের শর্তটি সত্য হয়:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

যদিও আমরা স্লাইসে 'rejected' status ট্র্যাক করছি না, তবুও আমরা কনসোলে error দেখাতে পারি, এর জন্য আমরা try-catch কনস্ট্রাকশন ব্যবহার করব। এছাড়াও এখানে আমরা finally যোগ করব, যাতে request executed হওয়ার পরে আবার লোকাল state কে 'idle' তে সেট করতে পারি:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('পণ্য সংরক্ষণ ত্রুটি: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch এবং finally ব্লক নিয়ে আমরা আলোচনা করেছি, আসুন try ব্লকের জন্য কোড লিখি। এখানে আমরা লোকাল status কে 'in pogress' তে সেট করব, যতক্ষণ না আমাদের কাছে কোনো response ফিরে আসে thunk executed হওয়ার ফলে, তারপর আমাদের thunk addProduct dispatch করব। ব্যবহার try-catch কনস্ট্রাকশন response-এর ধরন এর উপর নির্ভর করে আমাদের সাহায্য করবে RTK-এর unwrap ফাংশন, যেটি এটি রিটার্ন করা promise-এ যোগ করে। তারপর, যদি request সফল হয় আমরা লোকাল state-গুলিকে তাদের প্রাথমিক অবস্থায় সেট করি। সম্পূর্ণ কোড onSaveProductClick-এর জন্য এইরকম দেখাবে:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('পণ্য সংরক্ষণ ত্রুটি: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

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

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন। সেখানে NewStudentForm.jsx ফাইলটি খুলুন। আরেকটি লোকাল state requestStatus যোগ করুন, এবং প্রাথমিকভাবে এটিকে 'idle' তে সেট করুন। পাঠের উপকরণগুলি দেখে নিয়ে, একটি ভেরিয়েবল canBeSaved তৈরি করুন, যার সাহায্যে নতুন শিক্ষার্থীর তথ্য সংরক্ষণ বোতামটি কাজ করবে/কাজ করবে না, requestStatus-এর মান এবং ফিল্ডগুলি পূরণ হওয়ার উপর নির্ভর করে।

onSaveStudentClick-এর জন্য অ্যাসিঙ্ক্রোনাস কোড লিখুন, যা requestStatus-এর মান পরিবর্তন করবে পরিস্থিতি অনুযায়ী, thunk addProduct dispatch করবে নতুন শিক্ষার্থীর তথ্য সহ, ফিল্ডগুলি খালি করবে সফল request-এর ক্ষেত্রে এবং কনসোলে error দেখাবে ব্যর্থতার ক্ষেত্রে, যেমন পাঠে দেখানো হয়েছে। এর জন্য ব্যবহার করুন try-catch কনস্ট্রাকশন এবং RTK-এর ফাংশন unwrap।

আপনার অ্যাপ্লিকেশন চালু করুন, একটি নতুন শিক্ষার্থী যোগ করুন এবং নিশ্চিত হন যে সবকিছু কাজ করছে।