Přidání dat pomocí metody action v React Router

V této lekci se seznámíme s metodou action objektu trasy. Tato metoda je volána, když aplikace odešle HTTP požadavek typu POST, PUT, PATCH nebo DELETE (kromě GET) vaší trase.

Nejprve importujeme funkci pro vytváření produktu, kterou jsme napsali v předchozí lekci, do našeho root.jsx:

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

Nyní potřebujeme vytvořit funkci action, kterou bude React Router volat při kliknutí na tlačítko přidání produktu, umístíme ji za funkci loader:

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

Otevřeme main.jsx a importujme action:

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

A nastavme ji jako hodnotu metody action pro objekt trasy. Komponenta Form zabrání prohlížeči odesílat požadavky na server při stisknutí tlačítka, ale obrátí se na metodu action naší trasy. Takto zajímavě funguje směrování na straně klienta s React Router:

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

Spusťme naši aplikaci. Otevřeme záložku 'Aplikace' (Application pro Chrome) v panelu vývojáře, mezi různými typy úložišť klikněme na indexedDB, zde nás zajímá localforage. Nyní klikáním na tlačítko přidání produktů v naší aplikaci a obnovením úložiště localforage po kliknutí vidíme, jak se do keyvaluepairs v poli products přidávají objekty s různými id. Vítězství!!! To znamená, že se v úložišti vytvářejí záznamy! Samozřejmě seznam v naší aplikaci se také rozrůstá. Rada: nezapomeňte poté vyčistit uložená data této stránky na záložce 'Storage' v Application.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Použijte materiály lekce k vytvoření funkce action, přidejte ji do objektu kořenové trasy jako metodu action.