Legge til data med action-metoden i React Router

I denne leksjonen vil vi bli kjent med action-metoden til ruteobjektet. Denne metoden kalles når applikasjonen sender en HTTP-forespørsel av typen POST, PUT, PATCH eller DELETE (unntatt GET) til din rute.

La oss først importere funksjonen for å opprette produkt, som vi skrev i forrige leksjon, til vår root.jsx:

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

Nå må vi opprette en action-funksjon som React Router vil kalle ved klikk på knappen for å legge til produkt, la oss plassere den etter loader-funksjonen:

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

La oss åpne main.jsx og importere action:

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

Og sette den som verdi for action-metoden til ruteobjektet. Form-komponenten vil forhindre nettleseren i å sende forespørsler til serveren ved trykk på knappen, men vil i stedet henvende seg til action-metoden til vår rute. Slik fungerer klient-side routing interessant med React Router:

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

La oss starte applikasjonen vår. Åpne fanen 'Application' (Application for Chrome) i utviklerverktøyet, blant ulike typer lagring klikker du på indexedDB, her er vi interessert i localforage. Nå ved å klikke på knappen for å legge til produkter i applikasjonen vår og oppdatere localforage-lageret etter klikk ser vi hvordan i keyvaluepairs i arrayet products legges det til objekter med ulike id. Seier!!! Dette betyr at det opprettes poster i lagringen vår! Selvfølgelig økes også listen i applikasjonen vår. Tips: ikke glem å rense de lagrede dataene til denne siden på fanen 'Storage' i Application etterpå.

Ta applikasjonen du opprettet i oppgavene til tidligere leksjoner. Bruk materialet fra leksjonen til å opprette en action-funksjon, og legg den til i rotroute-objektet som action-metode.