Att lägga till data med action-metoden i React Router

I den här lektionen kommer vi att bekanta oss med action-metoden för route-objektet. Denna metod anropas när applikationen skickar en HTTP-förfrågan av typen POST, PUT, PATCH eller DELETE (förutom GET) till din route.

Låt oss först importera funktionen för att skapa en produkt, som vi skrev i förra lektionen, till vår root.jsx:

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

Nu behöver vi skapa en action-funktion som React Router kommer att anropa när användaren klickar på knappen för att lägga till produkt, låt oss placera den efter loader-funktionen:

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

Låt oss öppna main.jsx och importera action:

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

Och sätta den som värde för action-metoden för route-objektet. Komponenten Form kommer att förhindra webbläsaren från att skicka förfrågningar till servern vid knapptryck, utan kommer istället att anropa action-metoden för vår route. Så här intressant fungerar klient-sidans routing med React Router:

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

Låt oss starta vår applikation. Öppna fliken 'Application' (Application för Chrome) i utvecklarverktygen, klicka på indexedDB bland olika typer av lagring, här är vi intresserade av localforage. Nu när vi klickar på knappen för att lägga till produkter i vår applikation och uppdaterar localforage-lagringen efter klick ser vi hur i keyvaluepairs i arrayen products läggs objekt till med olika id. Seger!!! Det betyder att poster skapas i vår lagring! Naturligtvis uppdateras listan i vår applikation också. Tips: glöm inte att rensa de sparade uppgifterna för den här sidan på fliken 'Storage' i Application efteråt.

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd materialet från lektionen för att skapa en funktion action, lägg till den i root-route-objektet som en action-metod.