Додавање података са методом action у React Router

На овој лекцији ћемо се упознати са методом action објекта руте. Овај метод се позива када апликација шаље HTTP захтев типа POST, PUT, PATCH или DELETE (осим GET) вашој рути.

За почетак увезимо функцију за креирање производа, коју смо написали на прошлом лекцији у наш root.jsx:

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

Сада нам је потребно да креирамо функцију action, коју ће позивати React Router при клику на дугме за додавање производа, поставићемо је после функције loader:

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

Хајде да отворимо main.jsx и увеземо action:

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

И поставимо је као вредност методе action за објекат руте. Компонента Form неће дозволити претраживачу да шаље захтеве на сервер при притиску дугмета, већ ће се обратити методу action наше руте. Тако интересантно ради рутирање на страни клијента са React Router:

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

Покренимо нашу апликацију. Отворимо картицу 'Апликација' (Application за Chrome) на панели за програмере, међу различитим типовима складишта кликнемо на indexedDB, овде нас интересује localforage. Сада кликом на дугме за додавање производа у нашој апликацији и освежавањем складишта localforage након клика видимо како се у keyvaluepairs у низ products додају објекти са различитим id. Победа!!! То значи да се у нашем складишту креирају записи! Наравно и листа у нашој апликацији се допуњује. Савет: не заборавите да касније очистите сачуване податке ове странице на картици 'Storage' у Application.