Adăugarea datelor cu metoda action în React Router

În această lecție ne vom familiariza cu metoda action a obiectului de rută. Această metodă este apelată atunci când aplicația trimite o solicitare HTTP de tip POST, PUT, PATCH sau DELETE (cu excepția GET) către ruta dvs.

Pentru început, să importăm funcția pentru crearea produsului, pe care am scris-o în lecția anterioară în root.jsx:

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

Acum trebuie să creăm funcția action, pe care React Router o va apela la click pe butonul de adăugare a produsului, o vom plasa după funcția loader:

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

Să deschidem main.jsx și să importăm action:

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

Și să o setăm ca valoare a metodei action pentru obiectul de rută. Componenta Form nu va permite browserului să trimită solicitări către server la apăsarea butonului, ci se va adresa la metoda action a rutei noastre. Așa funcționează interesant rutarea pe partea de client cu React Router:

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

Să pornim aplicația noastră. Să deschidem fila 'Aplicație' (Application pentru Chrome) pe panoul dezvoltatorului, între diferite tipuri de stocare să facem click pe indexedDB, aici ne interesează localforage. Acum făcând click pe butonul de adăugare a produselor în aplicația noastră și actualizând stocarea localforage după click vom vedea cum în keyvaluepairs în matricea products se adaugă obiecte cu diferite id. Victorie!!! Aceasta înseamnă că în stocarea noastră se creează înregistrări! Desigur și lista în aplicația noastră se completează. Sfat: nu uitați să curățați apoi datele salvate ale acestei pagini pe fila 'Storage' în Application.

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, creați funcția action, adăugați-o în obiectul rutei principale ca metodă action.