Ажурирање података са FormData у React Router

Имамо функцију updateProduct за ажурирање података о производу у складишту. Сада ћемо прећи на податке из нашег обрасца за измену.

Приликом слања HTML обрасца, прегледач креира објекат FormData са подацима и шаље га у телу захтева на сервер. Штавише, вредност сваког уносног поља се извлачи у објекат из атрибута name (зато су нам и били потребни у обрасцу, сећате се?). Ми сада знамо да React Router шаље захтеве не на сервер, већ у метод action наше руте, па ће тамо завршити и FormData. Хајде да порукујемо са тим.

За почетак, отворимо нашу фајлић edit.jsx и увезимо updateProduct:

routes/edit.jsximport { updateProduct } from '../forStorage';

Затим ћемо написати функцију за action објекта руте, као што смо то раније чинили. Додаћемо је одмах након функције loader. Јој ћемо проследити наш request и URL параметре:

routes/edit.jsxexport async function action({ request, params }) {}

Из захтева ћемо добити FormData, затим извући из њега податке у облику објекта, који садржи парове кључ: вредност и уз помоћ updateProduct послати те податке у складиште:

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;
}

Остаје само да уђемо у main.jsx и додамо функцију action у објекат руте за измену. Увезимо action:

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

И додајмо га у објекат руте за измену:

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

Покрените сада апликацију, додајте пар производа у листу, затим кликом на њих попуните образац и притисните на дугме за чување. Не заборавите да одете у панел програмера у одељак localforage и освежите складиште. Сада у одељку keyvaluespairs можемо видети објекте у низу products са нашим унесеним подацима.