Redux-এ অনুরোধের স্থিতি প্রয়োগ

পূর্ববর্তী পাঠে আমরা অতিরিক্ত রিডিউসারের সাহায্যে বর্ণনা করেছি আমাদের অ্যাপ্লিকেশনটিকে কী করতে হবে, যদি fetchProducts অনুরোধ পাঠানোর সময় pending, fulfilled এবং rejected অ্যাকশনগুলি ডিসপ্যাচ করে। এখন আমরা ব্যবহারকারীকে দেখাতে পারি ডেটা লোড হওয়ার প্রক্রিয়াটি বর্তমানে কোন পর্যায়ে আছে।

আসুন আমাদের পণ্যসমূহের অ্যাপ্লিকেশনটি খুলি, এবং এর মধ্যে ProductsList.jsx ফাইলটি খুলি। প্রথমেই আমরা পণ্যের কার্ডের জন্য একটি আলাদা কম্পোনেন্ট তৈরি করব ProductCard। ইম্পোর্ট স্টেটমেন্টের পরেই ProductsList ফাংশনের আগে এটি করব। প্রপ্স হিসেবে এটিকে product পাস করব:

const ProductCard = ({ product }) => {
	return ()
}

এবং এখন return-এর খালি গোলাকার বন্ধনী ()-এর মধ্যে dispProducts থেকে পণ্যের ডেটা প্রদর্শনের জন্য সমস্ত কোড স্থানান্তর করব:

const ProductCard = ({ product }) => {
	return (
		<div key={product.id} className="product-excerpt">
			<h3>{product.name}</h3>
			<SellerOfProd sellerId={product.seller} />
			<p>{product.desc.substring(0, 100)}</p>
			<UserReactions product={product} />
			<Link to={`/products/${product.id}`} className="link-btn">
				view
			</Link>
		</div>
	)
}

এবং ProductsList-এ অবশিষ্ট লাইনটি মুছে ফেলব। এটি আমাদের আর দরকার নেই:

const dispProducts = products.map((product) => ())

এবং এখন ProductsList ফাংশনের কোডের শুরুতে আরও কয়েকটি ভেরিয়েবল ডিক্লেয়ার করব, error এবং content। প্রথমটি আমাদের জন্য হবে ত্রুটির, দ্বিতীয়টিতে আমরা অনুরোধের স্থিতির উপর নির্ভর করে বিভিন্ন বিষয়বস্তু লিখব। এটি const dataFetch = useRef(false)-এর আগে করব:

const error = useSelector((state) => state.products.error)
let content

এখন ProductsList কম্পোনেন্টের return কমান্ডের আগে শর্তসহ একটি কোড ব্লক লিখব, যার মাধ্যমে content-এ স্থিতির উপর নির্ভর করে বিভিন্ন বিষয়বস্তু যুক্ত হবে। প্রথমে আমরা 'in progress' স্থিতিটি বর্ণনা করব - যখন আমাদের অনুরোধ পাঠানো হয়েছে। এই ক্ষেত্রে আমরা ব্যবহারকারীকে জানাব যে ডেটা লোড হচ্ছে:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
}

যদি আমাদের লোডিং সফলভাবে সম্পন্ন হয় (আমরা এটি 'success' হিসেবে চিহ্নিত করেছি), তাহলে আমাদের প্রাপ্ত পণ্যগুলির তালিকা দেখাতে হবে। এটি map ব্যবহার করে ProductCard কম্পোনেন্টের মাধ্যমে দেখাব, যাকে প্রপ্স হিসেবে product পাস করব:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

এবং আমাদের কাছে থাকা শেষ স্থিতিটি - সেটি হল 'fail'। এটি যোগ করব। এখানে error ভেরিয়েবলটি ব্যবহার করব, যেখানে আমরা উপরে স্টেট থেকে ত্রুটি লিখেছি:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

এবং শেষ ধাপ হিসেবে আমরা return-এর জন্য কোড ব্লকে পুরানো {dispProducts}-কে {content} দিয়ে প্রতিস্থাপন করব।

আসুন আমাদের অ্যাপ্লিকেশনটি চালু করি, মেনুতে 'Products'-এ ক্লিক করি। সব কাজ করছে। আমরা দেখতে পাচ্ছি, যে প্রায় 2 সেকেন্ড (যেমন আমরা সার্ভারে সেট করেছিলাম) আমাদের পণ্য যোগ করার ফর্মের নিচে 'Products list loading ...' লেখাটি দেখাচ্ছে, এবং তারপর পণ্যের তালিকা দেখা যাচ্ছে।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। এটির মধ্যে StudentsList.jsx ফাইলটি খুলুন। এটিতে একটি নতুন কম্পোনেন্ট তৈরি করুন StudentCard। পাঠে দেখানো হিসাবে dispStudents থেকে কোড এটিতে স্থানান্তর করুন।

StudentsList ফাংশনে error এবং content ভেরিয়েবল তৈরি করুন। অনুরোধের স্থিতির উপর নির্ভর করে content ভেরিয়েবলে বিষয়বস্তু নির্ধারণ করুন। ফেরত দেওয়া মার্কআপে পুরানো dispStudents-কে content দিয়ে প্রতিস্থাপন করতে ভুলবেন না।