Tilføjelse af data med action-metoden i React Router

I denne lektion vil vi stifte bekendtskab med metoden action i ruteobjektet. Denne metode kaldes, når applikationen sender en HTTP-forespørgsel af typen POST, PUT, PATCH eller DELETE (undtagen GET) til din rute.

Lad os starte med at importere funktionen til at oprette et produkt, som vi skrev i den forrige lektion, ind i vores root.jsx:

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

Nu er vi nødt til at oprette en action-funktion, som React Router vil kalde ved klik på knappen til tilføjelse af produkt, vi placerer den efter funktionen loader:

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

Lad os åbne main.jsx og importere action:

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

Og sætte den som værdi for metoden action for ruteobjektet. Komponentet Form vil forhindre browseren i at sende forespørgsler til serveren ved tryk på knappen, men i stedet henvende sig til metoden action i vores rute. Sådan fungerer klient-side routing med React Router på en interessant måde:

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

Lad os starte vores applikation. Åbn fanen 'Applikation' (Application for Chrome) i udviklerpanelet, klik på indexedDB blandt de forskellige typer af lager, her er vi interesserede i localforage. Nu ved at klikke på knappen til tilføjelse af produkter i vores applikation og opdatere localforage-lageret efter klikket ser vi, hvordan der i keyvaluepairs i arrayet products tilføjes objekter med forskellige id. Sejr!!! Det betyder, at der oprettes poster i vores lager! Selvfølgelig bliver listen i vores applikation også udvidet. Tip: glem ikke at rydde de gemte data på denne side senere under fanen 'Storage' i Application.

Tag den applikation, du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen til at oprette en funktion action, tilføj den til rodrutens objekt som en action-metode.