Redux में Action भेजना और useDispatch हुक

हमने Redux एप्लिकेशन के लिए लगभग सभी घटकों को लागू कर दिया है। बस React कंपोनेंट से action भेजने को समझना बाकी है। चलिए शुरू करते हैं।

हमारा उत्पादों वाला एप्लिकेशन खोलें। NewProductForm कंपोनेंट के फॉर्म में हमारे पास नए उत्पाद के डेटा को सेव करने के लिए एक बटन है। चलिए इस पर एक क्लिक हैंडलर लगाते हैं। इस पर क्लिक करने पर onSaveProductClick हैंडलर चलना चाहिए:

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

नया उत्पाद बनाते समय हमें इसके लिए एक नई id की आवश्यकता होगी। हम इसे सर्वविदित लाइब्रेरी nanoid का उपयोग करके जनरेट करेंगे। वैसे, इसे इंस्टॉल करने की आवश्यकता नहीं है, क्योंकि यह पहले से ही RTK पैकेज के साथ आती है। आइए nanoid को इम्पोर्ट में जोड़ें:

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

हमें यह भी याद है कि state को बदलने का एकमात्र तरीका dispatch मेथड को कॉल करना है, जो store में होती है और action ऑब्जेक्ट पास करना है। इस मेथड तक पहुंचने के लिए, हम React-Redux हुक useDispatch का उपयोग करेंगे। आइए इसे भी इम्पोर्ट करें:

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

NewProductForm फंक्शन के कोड में इसके लिए एक कॉन्स्टेंट dispatch बनाएं हमारे लोकल स्टेट्स के लिए कॉन्स्टेंट बनाने के ठीक बाद:

products/NewProductForm.jsxconst dispatch = useDispatch()

हमें action creator productAdded को भी इम्पोर्ट करना होगा, जो हमें पिछले पाठ में मिला था:

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

अब हम onSaveProductClick हैंडलर फंक्शन खुद लिख सकते हैं। आइए इसे return कमांड से पहले करें:

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

फंक्शन के अंदर हम dispatch को कॉल करते हैं, action ऑब्जेक्ट बनाते हैं, जिसकी प्रॉपर्टी payload में जनरेट की गई id, नाम, विवरण, कीमत और मात्रा आएगी। यह सभी डेटा हम लोकल स्टेट्स से लेते हैं। साथ ही शुरुआत में हम जांचते हैं कि क्या सभी फील्ड भरे हुए हैं - केवल इस स्थिति में ही dispatch को कॉल करते हैं। अंत में फंक्शन के कोड में हम लोकल स्टेट्स को उनकी मूल स्थिति में वापस कर देते हैं:

products/NewProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productAdded({
        id: nanoid(),
        name,
        desc,
        price,
        amount
      })
    )

    setName('')
    setDesc('')
    setPrice(0)
    setAmount(0)
  }
}

अब हमारा एप्लिकेशन चलाएं, फॉर्म के फील्ड्स में डेटा डालें और सेव बटन दबाएं। हुर्रे, पेज के नीचे एक नया उत्पाद दिखाई दिया। Redux DevTools खोलकर, और उसमें Inspector टैब में, हम देखते हैं कि बाईं ओर @@INIT के अलावा हमारा action products/productAdded भी आ गया है। और दाईं ओर हम Action और State टैब पर क्लिक कर सकते हैं, @@INIT और products/productAdded के बीच स्विच करते हुए। अब हम देखते हैं कि हमारा नया उत्पाद जुड़ जाता है। साथ ही Action टैब पर हम वह action देखते हैं जो automatically जनरेट हुआ createSlice की मदद से (उदाहरण के लिए, Raw पर क्लिक करें)। हुर्रे: हमें इसे खुद से लिखने की जरूरत नहीं पड़ी।