Legge til data med action-metoden i React Router

I denne leksjonen vil vi bli kjent med action-metoden til ruteobjektet. Denne metoden kalles når applikasjonen sender en HTTP-forespørsel av typen POST, PUT, PATCH eller DELETE (unntatt GET) til din rute.

La oss først importere funksjonen for å opprette produkt, som vi skrev i forrige leksjon, til vår root.jsx:

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

Nå må vi opprette en action-funksjon som React Router vil kalle ved klikk på knappen for å legge til produkt, la oss plassere den etter loader-funksjonen:

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

La oss åpne main.jsx og importere action:

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

Og sette den som verdi for action-metoden til ruteobjektet. Form-komponenten vil forhindre nettleseren i å sende forespørsler til serveren ved trykk på knappen, men vil i stedet henvende seg til action-metoden til vår rute. Slik fungerer klient-side routing interessant med React Router:

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

La oss starte applikasjonen vår. Åpne fanen 'Application' (Application for Chrome) i utviklerverktøyet, blant ulike typer lagring klikker du på indexedDB, her er vi interessert i localforage. Nå ved å klikke på knappen for å legge til produkter i applikasjonen vår og oppdatere localforage-lageret etter klikk ser vi hvordan i keyvaluepairs i arrayet products legges det til objekter med ulike id. Seier!!! Dette betyr at det opprettes poster i lagringen vår! Selvfølgelig økes også listen i applikasjonen vår. Tips: ikke glem å rense de lagrede dataene til denne siden på fanen 'Storage' i Application etterpå.