Dodavanje podataka sa metodom action u React Router

U ovoj lekciji ćemo se upoznati sa metodom action objekta rute. Ova metoda se poziva kada aplikacija pošalje HTTP zahtev tipa POST, PUT, PATCH ili DELETE (osim GET) vašoj ruti.

Za početak, importujmo funkciju za kreiranje proizvoda koju smo napisali u prethodnoj lekciji u naš root.jsx:

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

Sada moramo da kreiramo funkciju action koju će React Router pozvati pri kliku na dugme za dodavanje proizvoda, postavićemo je posle funkcije loader:

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

Otvorimo main.jsx i importujmo action:

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

I postavimo je kao vrednost metode action za objekat rute. Komponenta Form neće dopustiti pregledaču da šalje zahteve na server pri pritisku dugmeta, već će se obratiti metodu action naše rute. Ovako zanimljivo radi rutiranje na strani klijenta sa React Router:

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

Pokrenimo našu aplikaciju. Otvorimo karticu 'Aplikacija' (Application za Chrome) na panelu za razvoj, među različitim tipovima skladišta kliknimo na indexedDB, ovde nas zanima localforage. Sada, klikajući na dugme za dodavanje proizvoda u našoj aplikaciji i osvežavajući skladište localforage posle klika vidimo kako se u keyvaluepairs u niz products dodaju objekti sa različitim id. Pobeda!!! Ovo znači da se u našem skladištu kreiraju zapisi! Naravno, lista u našoj aplikaciji se takođe dopunjuje. Napomena: ne zaboravite posle da očistite sačuvane podatke ove stranice na kartici 'Storage' u Application.

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći se materijalima lekcije, kreirajte funkciju action, dodajte je u objekat korenske rute kao metod action.