Ažuriranje podataka sa FormData u React Router-u

Imamo funkciju updateProduct za ažuriranje podataka o proizvodu u skladištu. Sada prelazimo na podatke iz našeg obrasca za izmenu.

Prilikom slanja HTML-obrasca, pretraživač kreira objekat FormData sa podacima i šalje ga u telu zahteva ka serveru. Štaviše, vrednost svakog polja se izvlači u objekat iz atributa name (zbog toga su nam bili potrebni u obrascu, sećate se?). Mi sada znamo da React Router šalje zahteve ne na server, već u metod action naše rute, prema tome, tamo će završiti i FormData. Hajde da poradimo na tome.

Za početak otvorimo naš fajl edit.jsx i importujmo updateProduct:

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

Zatim ćemo napisati funkciju za action objekta rute, kao što smo to ranije radili. Dodajmo je odmah nakon funkcije loader. Njoj ćemo proslediti naš request i URL parametre:

export async function action({ request, params }) {}

Iz zahteva ćemo dobiti FormData, zatim izvući iz njega podatke u vidu objekta, koji sadrži parove ključ: vrednost i pomoću updateProduct poslati te podatke u skladište:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

Ostaje samo da odemo u main.jsx i dodamo funkciju action u objekat rute za izmenu. Importujmo action:

import EditProduct, {
	loader as editProductLoader,
	action as editAction,
} from './routes/edit';

I dodajmo je u objekat rute za izmenu:

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

Pokrenite sada aplikaciju, dodajte par proizvoda u listu, zatim klikom na njih popunjavajte obrazac i pritisnite dugme za čuvanje. Ne zaboravite da odete u alatke za razvoj, u odeljak localforage i osvežavate skladište. Sada u odeljku keyvaluespairs možemo videti objekte u nizu products sa našim unesenim podacima.

Uzmite aplikaciju koju ste kreirali u zadacima za prošlu lekciju. Koristeći se materijalima lekcije, kreirajte funkciju action za rutu izmene podataka studenta, dodajte je u objekat rute izmene. Otvorite alatke za razvoj i uverite se da se pri promenama ažurirani podaci zaista prikazuju na kartici localforage.