Додавање на податоци со методот action во React Router

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

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

import { createProduct } from '../forStorage';

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

export async function action() {
	const product = await createProduct();
	return { product };
}

Да го отвориме main.jsx и да ја импортираме action:

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

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

const 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.

Земете ја апликацијата што ја создадовте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, креирајте функција action, додајте ја во рутер објектот на коренскиот рутер како метод action.