Pridávanie údajov pomocou metódy action v React Router

V tejto lekcii sa zoznámime s metódou action objektu trasy. Táto metóda sa volá vtedy, keď aplikácia odošle HTTP požiadavku typu POST, PUT, PATCH alebo DELETE (okrem GET) vašej trase.

Na začiatok importujeme funkciu pre vytvorenie produktu, ktorú sme napísali v predchádzajúcej lekcii do nášho root.jsx:

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

Teraz musíme vytvoriť funkciu action, ktorú bude volať React Router pri kliknutí na tlačidlo pridania produktu, umiestnime ju za funkciu loader:

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

Otvorme main.jsx a importujme action:

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

A nastavme ju ako hodnotu metódy action pre objekt trasy. Komponent Form zabráni prehliadaču odosielať požiadavky na server pri stlačení tlačidla a namiesto toho sa obráti na metódu action našej trasy. Takto zaujímavo funguje smerovanie na strane klienta s React Router:

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

Spustíme našu aplikáciu. Otvorme kartu 'Application' (Application pre Chrome) na paneli vývojára, medzi rôznymi typmi úložísk klikneme na indexedDB, tu nás zaujíma localforage. Teraz kliknutím na tlačidlo pridania produktov v našej aplikácii a obnovením úložiska localforage po kliknutí vidíme, ako sa do poľa products pridávajú objekty s rôznymi id. Víťazstvo!!! To znamená, že v našom úložisku sa vytvárajú záznamy! Samozrejme zoznam v našej aplikácii sa tiež dopĺňa. Rada: nezabudnite potom vyčistiť uložené dáto tejto stránky na karte 'Storage' v Application.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použitím materiálov z lekcie vytvorte funkciu action, pridajte ju do objektu koreňovej trasy ako metódu action.