Adatok hozzáadása action metódussal a React Routerben

Ezen a leckén megismerkedünk a útvonalobjektum action metódusával. Ezt a metódust akkor hívja meg az alkalmazás, amikor POST, PUT, PATCH vagy DELETE típusú HTTP kérést (kivéve GET) küld az útvonaladnak.

Kezdésként importáljuk a termék létrehozásához szükséges funkciót, amit az előző leckén írtunk, a root.jsx fájlunkba:

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

Most létre kell hoznunk egy action függvényt, amit a React Router fog meghívni, amikor rákattintanak a termék hozzáadása gombra, helyezzük el a loader függvény után:

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

Nyissuk meg a main.jsx fájlt és importáljuk az actiont:

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

És állítsuk be értékének a action metódust az útvonalobjektumhoz. A Form komponens nem engedi a böngészőnek, hogy kéréseket küldjön a szerverre a gomb megnyomásakor, hanem a action metódushoz fordul az útvonalunkon. Így működik érdekes módon a kliens oldali útválasztás a React Routerrel:

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

Indítsuk el az alkalmazásunkat. Nyissuk meg a 'Alkalmazás' fület (Application a Chrome-ban) a fejlesztői eszköztáron, a különböző típusú tárolók között kattintsunk az indexedDB-re, itt a localforage érdekel minket. Most, ha a hozzáadás gombra kattintunk az alkalmazásunkban és frissítjük a localforage tárolót a kattintás után, látjuk, hogy a keyvaluepairs-ben a products tömbbe különböző id-jú objektumok kerülnek. Győzelem!!! Ez azt jelenti, hogy a tárolóban létrejönnek bejegyzések! Természetesen a listánk az alkalmazásban is bővül. Tipp: ne felejtsd el később kitörölni az oldal által mentett adatokat az 'Storage' fülnél az Application alatt.

Vegyétek azt az alkalmazást, amit az előző leckék feladataihoz készítettetek. A lecke anyagát használva hozzatok létre egy action függvényt, adjátok hozzá az útvonalobjektumhoz mint action metódust.