Data byvoeg met die action metode in React Router

In hierdie les sal ons kennis maak met die action metode van die roete-objek. Hierdie metode word geroep wanneer die aansoek 'n HTTP-navraag tipe POST, PUT, PATCH of DELETE (behalwe GET) na jou roete stuur.

Om te begin, laai ons die funksie om 'n produk te skep, wat ons in die vorige les geskryf het, in ons root.jsx in:

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

Nou moet ons 'n action funksie skep, wat React Router sal roep wanneer daar op die byvoeg-produk-knoppie geklik word. Plaas dit na die loader funksie:

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

Kom ons maak main.jsx oop en laai die action in:

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

En stel dit as die waarde van die action metode vir die roete-objek. Die Form komponent sal nie toelaat dat die blaaier versoeke na die bediener stuur wanneer die knoppie gedruk word nie, maar sal eerder die action metode van ons roete nader. Dit is hoe kliëntkant roetebepaling so interessant werk met React Router:

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

Laat ons ons aansoek begin. Maak die oortjie 'Application' (Application vir Chrome) op die ontwikkelaarspaneel oop, klik onder die verskillende tipes bergings op indexedDB, hier is ons belangstel in localforage. Deur nou op die byvoeg-produkte-knoppie in ons aansoek te klik en die localforage-berging na die klik te verfris, sien ons hoe objekte met verskillende id by die skikking products in keyvaluepairs gevoeg word. Oorwinning!!! Dit beteken dat daar rekords in ons berging geskep word! Natuurlik word die lys in ons aansoek ook aangevul. Wenk: moenie vergeet om daarna die gestoor data van hierdie bladsy op die oortjie 'Storage' in Application skoon te maak nie.

Neem die aansoek wat jy in opdragte vir vorige lesse geskep het. Gebruik die materiaal van die les, skep 'n action funksie, voeg dit by die wortelroete-objek as die action metode.