Duomenų pridėjimas su action metodu React Router

Šioje pamokoje susipažinsime su maršruto objekto action metodu. Šis metodas iškviečiamas tada, kai programa siunčia HTTP užklausą POST, PUT, PATCH arba DELETE tipo (išskyrus GET) jūsų maršrutui.

Pirmiausia importuokime produkto kūrimo funkciją, kurią sukūrėme praeitoje pamokoje, į mūsų root.jsx:

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

Dabar mums reikia sukurti action funkciją, kurią iškviečia React Router paspaudus produkto pridėjimo mygtuką, patalpinkime ją po loader funkcijos:

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

Atidarykime main.jsx ir importuokime action:

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

Ir nustatykime ją kaip action metodo reikšmę maršruto objektui. Komponentas Form neleis naršyklei siųsti užklausų į serverį paspaudus mygtuką, o kreipsis į mūsų maršruto action metodą. Taip įdomiai veikia kliento pusės maršroutizavimas su React Router:

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

Paleiskime mūsų programą. Atidarykite skirtuką 'Programa' (Application Chrome) kūrėjo skydelyje, tarp įvairių saugyklų tipų spustelėkite indexedDB, čia mums įdomi localforage. Dabar spustelėdami produktų pridėjimo mygtuką mūsų programoje ir atnaujindami localforage saugyklą po spustelėjimo matome, kaip keyvaluepairs į masyvą products pridedami objektai su skirtingais id. Pergalė!!! Tai reiškia, kad mūsų saugykloje sukuriami įrašai! Žinoma, sąrašas mūsų programoje taip pat papildomas. Užuomina: nepamirškite vėliau išvalyti išsaugotus šio puslapio duomenis skirtuke 'Storage' Application.

Paimkite programą, kurią sukūrėte užduotyse prie ankstesnių pamokų. Pasinaudodami pamokos medžiaga, sukurkite action funkciją, pridėkite ją į šakninio maršruto objektą kaip action metodą.