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

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

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

products/NewProductForm.jsximport { addProduct } from './productsSlice'

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

products/NewProductForm.jsxconst [requestStatus, setRequestStatus] = useState('idle')

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

products/NewProductForm.jsxconst canBeSaved =
  [name, desc, price, amount, sellerId].every(Boolean) &&
  requestStatus === 'idle'

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

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {}
}

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

products/NewProductForm.jsxconst 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 के लिए पूरा कोड इस तरह दिखेगा:

products/NewProductForm.jsxconst 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 में भी जाएं और उसके टैब्स के बीच घूमें, एक्शन और अपने स्टेट में होने वाले बदलाव को देखें।