React Router में FormData के साथ डेटा अपडेट करना

हमारे पास स्टोरेज में उत्पाद डेटा को अपडेट करने के लिए updateProduct फ़ंक्शन है। अब हम संपादन फ़ॉर्म से डेटा पर आगे बढ़ते हैं।

HTML फ़ॉर्म सबमिट करते समय, ब्राउज़र FormData ऑब्जेक्ट बनाता है और इसे सर्वर पर रिक्वेस्ट बॉडी में भेजता है। इसके अलावा, प्रत्येक इनपुट का मान name एट्रिब्यूट से ऑब्जेक्ट में निकाला जाता है (इसलिए वे फ़ॉर्म में हमारे लिए आवश्यक थे, याद है?)। अब हम जानते हैं कि React Router रिक्वेस्ट्स को सर्वर पर नहीं भेजता, बल्कि हमारे रूट की action मेथड में भेजता है, तदनुसार, FormData भी वहां पहुंचेगा। आइए इसके साथ काम करते हैं।

शुरुआत के लिए, हमारी फ़ाइल edit.jsx खोलें और updateProduct इम्पोर्ट करें:

routes/edit.jsximport { updateProduct } from '../forStorage';

फिर हम रूट ऑब्जेक्ट के लिए action फ़ंक्शन लिखेंगे, जैसा कि हमने पहले किया था। इसे loader फ़ंक्शन के तुरंत बाद जोड़ेंगे। हम इसे अपना request और URL पैरामीटर पास करेंगे:

routes/edit.jsxexport async function action({ request, params }) {}

रिक्वेस्ट से हम FormData प्राप्त करेंगे, फिर उससे डेटा को key: value जोड़े वाले ऑब्जेक्ट के रूप में निकालेंगे और updateProduct की मदद से इन डेटा को स्टोरेज में भेजेंगे:

routes/edit.jsxexport async function action({ request, params }) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateProduct(params.productId, updates);
  return 1;
}

अब केवल main.jsx में जाना बाकी है और action फ़ंक्शन को एडिट रूट के ऑब्जेक्ट में जोड़ना है। आइए action इम्पोर्ट करें:

main.jsximport EditProduct, {
  loader as editProductLoader,
  action as editAction,
} from './routes/edit';

और इसे एडिट रूट ऑब्जेक्ट में जोड़ें:

main.jsx{
  path: 'products/:productId/edit',
  element: <EditProduct />,
  loader: editProductLoader,
  action: editAction,
},

अब एप्लिकेशन चलाएं, सूची में कुछ उत्पाद जोड़ें, फिर उन पर क्लिक करके फ़ॉर्म भरें और सेव बटन पर क्लिक करें। डेवलपर टूल्स के localforage सेक्शन में जाना न भूलें और स्टोरेज को रिफ्रेश करें। अब keyvaluespairs सेक्शन में हम ऐरे products में अपने दर्ज किए गए डेटा वाले ऑब्जेक्ट देख सकते हैं।