Redux में ब्राउज़र में उत्पाद संपादन पृष्ठ
पिछले पाठ में हमने एक फॉर्म बनाया उत्पाद संपादन के लिए। आइए इसके लिए एक रूट जोड़ते हैं।
हमारे उत्पाद एप्लिकेशन को खोलें,
और इसमें App.jsx फ़ाइल खोलें और एक और
चाइल्ड रूट ऑब्जेक्ट जोड़ें
children प्रॉपर्टी की ऐरे में
(EditProductForm को इम्पोर्ट करना न भूलें):
{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
साथ ही संपादन फॉर्म पर जाने के लिए
हमें एक लिंक बनाने की आवश्यकता है। इसके लिए
ProductPage.jsx खोलें और इस लिंक को
रिटर्न किए गए मार्कअप में उत्पाद की मात्रा वाले
अंतिम पैराग्राफ के बाद और बंद होने वाले डिव के पहले रखें:
<Link to={`/editProduct/${product.id}`} className="link-btn">
edit
</Link>
साथ ही राउटर लाइब्रेरी से Link को इम्पोर्ट करें:
import { Link } from 'react-router-dom'
हमारा एप्लिकेशन चलाएं और किसी उत्पाद की
व्यू बटन पर क्लिक करें। उसे
संपादित करने का प्रयास करें और वापस
उत्पादों की सूची पर लौटें, बाईं ओर के मेन्यू में
'Products' लिंक पर क्लिक करके। साथ ही Redux
DevTools में आप एक नया एक्शन
productUpdated देख सकते हैं और स्टोर में
उत्पाद ऑब्जेक्ट में परिवर्तन देख सकते हैं।
अपना छात्र एप्लिकेशन खोलें।
App.jsx फ़ाइल में छात्र डेटा के संपादन के लिए
एक और चाइल्ड रूट जोड़ें।
छात्र पेज के मार्कअप में Link एलिमेंट जोड़ें
उसके डेटा संपादन पेज पर जाने के लिए।
अपना एप्लिकेशन चलाएं, किसी छात्र का डेटा संपादित करने का प्रयास करें। ब्राउज़र की एड्रेस बार पर ध्यान दें, जब आप संपादन पेज पर हों। ब्राउज़र के Redux DevTools में परिवर्तन देखें।
