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

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

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

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

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

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

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

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

export 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:

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

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

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

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

Узмите апликацију коју сте креирали у задацима из прошле лекције. Користећи материјале лекције, креирајте функцију action за руту измене података студента, додајте је у објекат руте измене. Отворите панел програмера и уверите се да при изменама ажурирани подаци заиста се приказују на картици localforage.