Tilføjelse af data med action-metoden i React Router

I denne lektion vil vi stifte bekendtskab med metoden action i ruteobjektet. Denne metode kaldes, når applikationen sender en HTTP-forespørgsel af typen POST, PUT, PATCH eller DELETE (undtagen GET) til din rute.

Lad os starte med at importere funktionen til at oprette et produkt, som vi skrev i den forrige lektion, ind i vores root.jsx:

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

Nu er vi nødt til at oprette en action-funktion, som React Router vil kalde ved klik på knappen til tilføjelse af produkt, vi placerer den efter funktionen loader:

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

Lad os åbne main.jsx og importere action:

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

Og sætte den som værdi for metoden action for ruteobjektet. Komponentet Form vil forhindre browseren i at sende forespørgsler til serveren ved tryk på knappen, men i stedet henvende sig til metoden action i vores rute. Sådan fungerer klient-side routing med React Router på en interessant måde:

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

Lad os starte vores applikation. Åbn fanen 'Applikation' (Application for Chrome) i udviklerpanelet, klik på indexedDB blandt de forskellige typer af lager, her er vi interesserede i localforage. Nu ved at klikke på knappen til tilføjelse af produkter i vores applikation og opdatere localforage-lageret efter klikket ser vi, hvordan der i keyvaluepairs i arrayet products tilføjes objekter med forskellige id. Sejr!!! Det betyder, at der oprettes poster i vores lager! Selvfølgelig bliver listen i vores applikation også udvidet. Tip: glem ikke at rydde de gemte data på denne side senere under fanen 'Storage' i Application.