Gegevens toevoegen met de action methode in React Router

In deze les maken we kennis met de action methode van de route-object. Deze methode wordt aangeroepen wanneer de applicatie een HTTP-verzoek van het type POST, PUT, PATCH of DELETE (behalve GET) naar uw route stuurt.

Laten we eerst de functie voor het maken van een product, die we in de vorige les hebben geschreven, importeren in onze root.jsx:

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

Nu moeten we een action functie creëren die door React Router wordt aangeroepen bij het klikken op de knop voor het toevoegen van een product, we plaatsen deze na de loader functie:

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

Laten we main.jsx openen en de action importeren:

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

En stellen deze in als waarde voor de methode action van de route-object. De Form component voorkomt dat de browser verzoeken naar de server stuurt bij het indrukken van de knop, maar richt zich tot de action methode van onze route. Zo werkt client-side routing met React Router op een interessante manier:

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

Laten we onze applicatie starten. Open het tabblad 'Applicatie' (Application voor Chrome) in de ontwikkelaarsconsole, klik onder de verschillende soorten opslag op indexedDB, hier zijn we geïnteresseerd in localforage. Door nu te klikken op de knop voor het toevoegen van producten in onze applicatie en de localforage opslag te vernieuwen na de klik zien we hoe er objecten met verschillende id worden toegevoegd aan de array products in keyvaluepairs. Overwinning!!! Dit betekent dat er records in onze opslag worden aangemaakt! Natuurlijk wordt de lijst in onze applicatie ook aangevuld. Tip: vergeet niet later de opgeslagen gegevens van deze pagina op het tabblad 'Storage' in Application op te ruimen.

Neem de applicatie die u heeft gemaakt in de opdrachten bij de vorige lessen. Gebruikmakend van het lesmateriaal, creëer een functie action, voeg deze toe aan het object van de hoofdroute als de action methode.