Redux में ब्राउज़र में उत्पाद संपादन पृष्ठ

पिछले पाठ में हमने एक फॉर्म बनाया उत्पाद संपादन के लिए। आइए इसके लिए एक रूट जोड़ते हैं।

हमारे उत्पाद एप्लिकेशन को खोलें, और इसमें App.jsx फ़ाइल खोलें और एक और चाइल्ड रूट ऑब्जेक्ट जोड़ें children प्रॉपर्टी की ऐरे में (EditProductForm को इम्पोर्ट करना न भूलें):

App.jsx{
  path: '/editProduct/:productId',
  element: <EditProductForm />,
},

साथ ही संपादन फॉर्म पर जाने के लिए हमें एक लिंक बनाने की आवश्यकता है। इसके लिए ProductPage.jsx खोलें और इस लिंक को रिटर्न किए गए मार्कअप में उत्पाद की मात्रा वाले अंतिम पैराग्राफ के बाद और बंद होने वाले डिव के पहले रखें:

products/ProductPage.jsx<Link to={`/editProduct/${product.id}`} className="link-btn">
  edit
</Link>

साथ ही राउटर लाइब्रेरी से Link को इम्पोर्ट करें:

products/ProductPage.jsximport { Link } from 'react-router-dom'

हमारा एप्लिकेशन चलाएं और किसी उत्पाद की व्यू बटन पर क्लिक करें। उसे संपादित करने का प्रयास करें और वापस उत्पादों की सूची पर लौटें, बाईं ओर के मेन्यू में 'Products' लिंक पर क्लिक करके। साथ ही Redux DevTools में आप एक नया एक्शन productUpdated देख सकते हैं और स्टोर में उत्पाद ऑब्जेक्ट में परिवर्तन देख सकते हैं।