Redux में कंपोनेंट में thunk के काम के परिणाम दिखाना

पिछले पाठ में हमने thunk addProduct की मदद से POST-अनुरोध भेजा था। आइए अब इसके काम के परिणामों को कंपोनेंट में दिखाएं।

हमारे उत्पादों वाले एप्लिकेशन को खोलते हैं, और उसमें फाइल NewProductForm.jsx खोलते हैं, क्योंकि यह कंपोनेंट नया उत्पाद जोड़ने के लिए जिम्मेदार है। आयात वाली लाइनों को देखते हैं। एक्शन productAdded के आयात को thunk addProduct के आयात से बदलते हैं:

import { addProduct } from './productsSlice'

अब, चूंकि हम स्लाइस में अनुरोध की 'pending' स्थिति पर नज़र नहीं रख रहे हैं, आइए ऐसा करते हैं कि उपयोगकर्ता उत्पाद को सहेजने वाले बटन पर केवल एक बार क्लिक कर सके, क्योंकि हमें वही दोहराए गए अनुरोध नहीं चाहिए। इसके लिए हम एक और स्थानीय स्टेट बनाएंगे:

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

इसके बाद हैंडलर के बाद और फंक्शन onSaveProductClick से पहले कोड लिखते हैं, जिसमें हम जांचेंगे कि क्या फॉर्म के सभी फील्ड भरे हुए हैं और क्या अनुरोध की स्थिति 'idle' में है:

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

फिर हम onSaveProductClick के लिए कोड बदलेंगे। सबसे पहले यह एक एसिंक्रोनस फंक्शन होगा और यह तभी काम करेगा, जब ऊपर दी गई शर्त सही हो:

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

भले ही हमने स्लाइस में 'rejected' स्थिति पर नज़र नहीं रखी है, फिर भी हम कंसोल में एरर दिखा सकते हैं, इसके लिए हम try-catch का इस्तेमाल करेंगे। यहां हम finally भी जोड़ेंगे, ताकि अनुरोध पूरा होने के बाद स्थानीय स्टेट को फिर से 'idle' में सेट कर सकें:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('उत्पाद सहेजने में त्रुटि: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch और finally ब्लॉक से हो गए, आइए अब try ब्लॉक के लिए कोड लिखते हैं। यहां हम स्थानीय स्थिति को 'in pogress' में सेट करेंगे, जब तक कि हमें thunk के काम के परिणामस्वरूप कोई जवाब नहीं मिल जाता, फिर हम अपना thunk addProduct भेजेंगे। जवाब के प्रकार के आधार पर try-catch संरचना का इस्तेमाल करने में RTK का फंक्शन unwrap हमारी मदद करेगा, जिसे यह लौटाए गए प्रॉमिस में जोड़ता है। फिर, अगर अनुरोध सफल रहा तो हम स्थानीय स्टेट को उनकी शुरुआती स्थिति में सेट करते हैं। 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')
		}
	}
}

आइए अपना एप्लिकेशन चलाते हैं और नया उत्पाद जोड़ने की कोशिश करते हैं। जैसा कि आप देख रहे हैं, सफल अनुरोध की स्थिति में फील्ड साफ हो जाते हैं और नया उत्पाद उत्पादों की सूची में जुड़ जाता है। ब्राउज़र में Redux DevTools में भी जाएं और उसके टैब्स के बीच घूमें, एक्शन और अपने स्टेट में होने वाले बदलाव को देखें।

अपने छात्रों वाला एप्लिकेशन खोलें। उसमें फाइल NewStudentForm.jsx खोलें। एक और स्थानीय स्टेट requestStatus जोड़ें, और शुरू में इसे 'idle' में सेट करें। पाठ की सामग्री से परिचित होकर, वेरिएबल canBeSaved बनाएं, जिसकी मदद से छात्र के नए डेटा को सहेजने वाला बटन requestStatus के मान और फील्ड के भरे होने के आधार पर काम करेगा/नहीं करेगा।

onSaveStudentClick के लिए एसिंक्रोनस कोड लिखें, जो स्थिति के अनुसार requestStatus का मान बदलेगा, नए छात्र के डेटा के साथ thunk addProduct भेजेगा, सफल अनुरोध की स्थिति में फील्ड साफ करेगा और असफलता की स्थिति में कंसोल में एरर दिखाएगा, जैसा कि पाठ में दिखाया गया है। इसके लिए try-catch संरचना और RTK के फंक्शन unwrap का इस्तेमाल करें।

अपना एप्लिकेशन चलाएं, नया छात्र जोड़ें और सुनिश्चित करें कि सब कुछ काम कर रहा है।