React Router-däki hereket metodu bilen maglumat goşmak

Bu sapakda biz ýol belligi obyektiniň action metodu bilen tanyşarys. Bu metod programmaňyzyň ýol belligiňize HTTP sorag POST, PUT, PATCH ýa-da DELETE görnüşinde (GET-den başga) iberende çaýrylýar.

Başlangyç üçin, öňki sapakda ýazylan önüm döretmek funksiýasyny root.jsx faýlymyza import edeliň:

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

Indi React Router-iň önüm goşmak düwmesine basylanda çaýryjak bolan action funksiýasyny döretmeli, ony loader funksiýasyndan soň ýerleşdireris:

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

Geliň main.jsx faýlymyzy açalyň we action-y import edeliň:

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

We ony ýol belligi obyekti üçin action metodynyň bahasy hökmünde goýalyň. Form komponenti brauzeriň düwmä basylýança serwere sorag ibermegine ýol bermez, eýsem biziň ýol belligimiziň action metodyna ýüz tutar. React Router bilen müşderi tarapyndaky marşrutiýeleme şeýle gyzykly işleýär:

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

Programmamyzy işleteliň. Öndürijilik panelindäki 'Programma' (Chrome üçin Application) goşmagyny açalyň, müşderi ammarynyň dürli görnüşleri arasyndan indexedDB-e basalyň, bu ýerde bizi localforage gyzyklandyrýar. Indi programmamyzdaky önüm goşmak düwmesine basyp we basylandan soň localforage ammaryny täzeläp, göreris products massiwine dürli id-li obyektler goşulýar. Utuş!!! Bu ammarymyzda ýazgylar döredilýändigini aňladýar! Elbetde biziň programmamyzdaky sanaw hem doldurylýar. Bellik: soňra bu sahypanyň Application goşmagynyň 'Storage' bölüminde ýatdan saklanan maglumatyňyzy arassalamagy ýadyňyzdan çykarmaň.