React Router में action मethod के साथ डेटा जोड़ना

इस पाठ में हम रूट ऑब्जेक्ट की action method से परिचित होंगे। यह method तब कॉल की जाती है जब एप्लिकेशन POST, PUT, PATCH या DELETE (GET को छोड़कर) HTTP request आपके रूट पर भेजता है।

शुरुआत के लिए, आइए उत्पाद बनाने के लिए फ़ंक्शन import करें, जिसे हमने पिछले पाठ में root.jsx में लिखा था:

routes/root.jsximport { createProduct } from '../forStorage';

अब हमें action function बनाने की आवश्यकता है, जिसे React Router उत्पाद जोड़ने बटन पर क्लिक करने पर कॉल करेगा, इसे loader function के बाद रखेंगे:

routes/root.jsxexport async function action() {
  const product = await createProduct();
  return { product };
}

आइए main.jsx खोलें और action import करें:

main.jsximport Root, {
  loader as rootLoader,
  action as rootAction
} from './routes/root';

और इसे रूट ऑब्जेक्ट के action method के मान के रूप में सेट करें। Form component ब्राउज़र को बटन दबाने पर सर्वर पर request भेजने से रोकेगा, और हमारे रूट के action method से संपर्क करेगा। यह React Router के साथ क्लाइंट साइड रूटिंग का दिलचस्प तरीका है:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
  
]);

आइए हमारा एप्लिकेशन चलाएं। डेवलपर पैनल पर 'Application' (Chrome के लिए Application) टैब खोलें, विभिन्न प्रकार के स्टोरेज में indexedDB पर क्लिक करें, यहाँ हमें localforage में दिलचस्पी है। अब हमारे एप्लिकेशन में उत्पाद जोड़ने बटन पर क्लिक करने और क्लिक के बाद localforage स्टोरेज को रिफ्रेश करने पर हम देखते हैं कि keyvaluepairs में products array में विभिन्न id वाली objects जुड़ रही हैं। जीत!!! इसका मतलब है कि हमारे स्टोरेज में records बन रहे हैं! निश्चित रूप से हमारे एप्लिकेशन में सूची भी भर रही है। संकेत: बाद में Application टैब पर 'Storage' में इस पेज के सेव डेटा को साफ़ करना न भूलें।