रेडक्स में डेटा संपादन के लिए फॉर्म

अब हमारे पास store में डेटा बदलने के लिए एक reducer है। इस पाठ में हम एक फॉर्म बनाएंगे, जिसकी मदद से हम उत्पाद डेटा को संपादित कर सकेंगे।

चलिए हमारे उत्पाद एप्लिकेशन को खोलते हैं और products फोल्डर में फाइल EditProductForm.jsx बनाते हैं। कंपोनेंट EditProductForm का निर्माण NewProductForm के समान होगा, सिवाय कुछ अंतरों के, जिन पर हम रुकेंगे। इसलिए NewProductForm.jsx का पूरा कोड कॉपी करें और बनाई गई फाइल EditProductForm.jsx में पेस्ट करें। अब क्रम से शुरू करते हैं।

आयात से nanoid हटा दें, यहाँ हमें id जनरेट करने की आवश्यकता नहीं है। आयात productAdded को productUpdated से बदलें, क्योंकि यहाँ हम एक्शन का उपयोग करेंगे अपडेट करने के लिए, जोड़ने के लिए नहीं उत्पाद।

अगला, हमारे कंपोनेंट के फंक्शन का नाम NewProductForm से EditProductForm में बदलें।

इससे पहले कि हम लोकल स्टेट्स को EditProductForm फंक्शन में name, desc, price और amount के लिए परिभाषित करें, चलिए कुछ और लाइनें कोड की डालते हैं। जैसा कि हमने पहले उल्लेख किया था, यहाँ हमें id जनरेट करने की आवश्यकता नहीं है। अब हमारा कार्य इसे संपादित किए जाने वाले उत्पाद के डेटा से प्राप्त करना है। हमने पहले भी ऐसा किया था जब उत्पाद के लिए अलग पेज बना रहे थे। तो, हुक useParams की सहायता से id प्राप्त करें, और फिर आवश्यक उत्पाद ढूंढें, हुक useSelector का उपयोग करके (दोनों हुक्स को फाइल की शुरुआत में इम्पोर्ट करना न भूलें):

products/EditProductForm.jsxlet params = useParams()
const { productId } = params

const product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

इसके बाद लोकल स्टेट्स की घोषणा वाले ब्लॉक को बदलें। अब हमें प्रारंभिक मान के रूप में store से प्राप्त उत्पाद के डेटा को निर्दिष्ट करना है। पहला स्टेट इस तरह दिखेगा, बाकी तीन को स्वयं बदलें:

products/EditProductForm.jsxconst [name, setName] = useState(product.name)

useDispatch के लिए वेरिएबल निर्दिष्ट करने के बाद चलिए useNavigate हुक के लिए एक और लाइन कोड डालते हैं। हम इसका उपयोग उत्पाद पेज पर वापस जाने के लिए करेंगे जब उपयोगकर्ता फॉर्म में किए गए परिवर्तनों को सहेज लेगा:

products/EditProductForm.jsxconst navigate = useNavigate()

इस हुक को फाइल की शुरुआत में भी इम्पोर्ट करें:

products/EditProductForm.jsximport { useNavigate, useParams } from 'react-router-dom'

इसके बाद हमारे पास इनपुट फील्ड्स के लिए हैंडलर्स हैं। और उनके बाद हमें onSaveProductClick फंक्शन को ठीक करना आवश्यक है। अब इसमें क्लिक करने पर हम एक्शन productUpdated को प्राप्त id और ऑब्जेक्ट के रूप में बदले गए डेटा के साथ भेजेंगे। बाद में हमारा navigate जोड़ेंगे, संपादित उत्पाद के पेज पर जाने के लिए:

products/EditProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productUpdated({
        id: productId,
        name,
        desc,
        price,
        amount,
      })
    );
    
    navigate(`/products/${productId}`);
  }
}

अब केवल हमारे रिटर्न किए जाने वाले JSX में इस लाइन को ढूंढना बाकी है:

products/EditProductForm.jsx<h2>Add a New Product</h2>

और इसे इससे बदलें:

products/EditProductForm.jsx<h2>Edit Product</h2>