Adatok hozzáadása action metódussal a React Routerben

Ezen a leckén megismerkedünk a útvonalobjektum action metódusával. Ezt a metódust akkor hívja meg az alkalmazás, amikor POST, PUT, PATCH vagy DELETE típusú HTTP kérést (kivéve GET) küld az útvonaladnak.

Kezdésként importáljuk a termék létrehozásához szükséges funkciót, amit az előző leckén írtunk, a root.jsx fájlunkba:

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

Most létre kell hoznunk egy action függvényt, amit a React Router fog meghívni, amikor rákattintanak a termék hozzáadása gombra, helyezzük el a loader függvény után:

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

Nyissuk meg a main.jsx fájlt és importáljuk az actiont:

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

És állítsuk be értékének a action metódust az útvonalobjektumhoz. A Form komponens nem engedi a böngészőnek, hogy kéréseket küldjön a szerverre a gomb megnyomásakor, hanem a action metódushoz fordul az útvonalunkon. Így működik érdekes módon a kliens oldali útválasztás a React Routerrel:

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

Indítsuk el az alkalmazásunkat. Nyissuk meg a 'Alkalmazás' fület (Application a Chrome-ban) a fejlesztői eszköztáron, a különböző típusú tárolók között kattintsunk az indexedDB-re, itt a localforage érdekel minket. Most, ha a hozzáadás gombra kattintunk az alkalmazásunkban és frissítjük a localforage tárolót a kattintás után, látjuk, hogy a keyvaluepairs-ben a products tömbbe különböző id-jú objektumok kerülnek. Győzelem!!! Ez azt jelenti, hogy a tárolóban létrejönnek bejegyzések! Természetesen a listánk az alkalmazásban is bővül. Tipp: ne felejtsd el később kitörölni az oldal által mentett adatokat az 'Storage' fülnél az Application alatt.