Att lägga till data med action-metoden i React Router

I den här lektionen kommer vi att bekanta oss med action-metoden för route-objektet. Denna metod anropas när applikationen skickar en HTTP-förfrågan av typen POST, PUT, PATCH eller DELETE (förutom GET) till din route.

Låt oss först importera funktionen för att skapa en produkt, som vi skrev i förra lektionen, till vår root.jsx:

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

Nu behöver vi skapa en action-funktion som React Router kommer att anropa när användaren klickar på knappen för att lägga till produkt, låt oss placera den efter loader-funktionen:

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

Låt oss öppna main.jsx och importera action:

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

Och sätta den som värde för action-metoden för route-objektet. Komponenten Form kommer att förhindra webbläsaren från att skicka förfrågningar till servern vid knapptryck, utan kommer istället att anropa action-metoden för vår route. Så här intressant fungerar klient-sidans routing med React Router:

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

Låt oss starta vår applikation. Öppna fliken 'Application' (Application för Chrome) i utvecklarverktygen, klicka på indexedDB bland olika typer av lagring, här är vi intresserade av localforage. Nu när vi klickar på knappen för att lägga till produkter i vår applikation och uppdaterar localforage-lagringen efter klick ser vi hur i keyvaluepairs i arrayen products läggs objekt till med olika id. Seger!!! Det betyder att poster skapas i vår lagring! Naturligtvis uppdateras listan i vår applikation också. Tips: glöm inte att rensa de sparade uppgifterna för den här sidan på fliken 'Storage' i Application efteråt.