Andmete lisamine action meetodiga React Routeris

Selles õppetükis tutvume marsruudi objekti meetodiga action. See meetod kutsutakse välja siis, kui rakendus saadab teie marsruudile HTTP päringu tüübiga POST, PUT, PATCH või DELETE (välja arvatud GET).

Alustuseks impordime toote loomise funktsiooni, mille me kirjutasime eelmises õppetükis, oma faili root.jsx:

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

Nüüd peame looma funktsiooni action, mida React Router kutsub välja toote lisamise nupule vajutamisel, paigutame selle funktsiooni loader järele:

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

Avame faili main.jsx ja impordime action'i:

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

Ja määrame selle väärtuseks meetodi action marsruudi objekti jaoks. Komponent Form ei luba brauseril saata päringuid serverile nupu vajutamisel, vaid pöördub meie marsruudi meetodi action poole. Nii huvitavalt toimib kliendipoolne marsruutimine React Routeriga:

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

Käivitame oma rakenduse. Avame vahelehe 'Rakendus' (Application Chrome'i jaoks) arendustööriista paneelil, klõpsake erinevate ladustamistüüpide hulgast indexedDB peal, siin huvitab meid localforage. Nüüd, klõpsates meie rakenduses toodete lisamise nupul ja värskendades localforage'i pärast klõpsu näeme, kuidas keyvaluepairs'i massiivi products lisatakse objektid erinevate id'dega. Võit!!! See tähendab, et meie andmebaasi luuakse kirjeid! Muidugi ka meie rakenduse nimekiri täieneb. Vihje: ärge unustage seejärel selle lehe salvestatud andmeid puhastada vahelehel 'Salvestus' (Storage) rakenduses (Application).