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:

routes/edit.jsximport { 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:

routes/edit.jsxexport 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:

routes/edit.jsxexport 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:

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

I dodajmo je u objekat rute za izmenu:

main.jsx{
  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.