Dodajanje podatkov z metodo action v React Router

V tej lekciji se bomo seznanili z metodo action objekta poti. Ta metoda se pokliče, ko aplikacija pošlje HTTP zahtevek tipa POST, PUT, PATCH ali DELETE (razen GET) vaši poti.

Za začetek uvozimo funkcijo za ustvarjanje produkta, ki smo jo napisali v prejšnji lekciji, v naš root.jsx:

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

Zdaj moramo ustvariti funkcijo action, ki jo bo klical React Router ob kliku na gumb za dodajanje produkta, postavimo jo za funkcijo loader:

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

Odprimo main.jsx in uvozimo action:

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

In jo nastavimo kot vrednost metode action za objekt poti. Komponenta Form prepreči brskalniku pošiljanje zahtevkov na strežnik ob pritisku gumba, temveč se obrne na metodo action naše poti. Tako zanimivo deluje usmerjanje na strani odjemalca z React Router:

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

Zaženimo našo aplikacijo. Odprimo zavihek 'Aplikacija' (Application za Chrome) v razvojnih orodjih, med različnimi tipi shrambe kliknimo na indexedDB, tukaj nas zanima localforage. Zdaj z klikom na gumb za dodajanje produktov v naši aplikaciji in osveževanjem shrambe localforage po kliku vidimo, kako se v keyvaluepairs v matriko products dodajajo objekti z različnimi id. Zmaga!!! To pomeni, da se v naši shrambi ustvarjajo zapisi! Seveda se seznam v naši aplikaciji tudi dopolnjuje. Namig: ne pozabite pozneje očistiti shranjenih podatkov te strani na zavihku 'Storage' v Application.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva lekcije ustvarite funkcijo action, dodajte jo v objekt korenske poti kot metodo action.