Aktualizacja danych za pomocą FormData w React Router

Mamy funkcję updateProduct do aktualizacji danych produktu w magazynie. Teraz przejdźmy do danych z naszego formularza edycji.

Podczas przesyłania formularza HTML przeglądarka tworzy obiekt FormData z danymi i wysyła go w treści żądania na serwer. Co więcej, wartość każdego pola input jest pobierana do obiektu z atrybutu name (dlatego były nam one potrzebne w formularzu, pamiętacie?). My teraz wiemy, że React Router wysyła żądania nie na serwer, ale do metody action naszej trasy, odpowiednio, tam trafi również FormData. Zajmijmy się tym.

Na początek otwórzmy nasz plik edit.jsx i zaimportujmy updateProduct:

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

Następnie napiszemy funkcję dla action obiektu trasy, jak robiliśmy to wcześniej. Dodajmy ją zaraz po funkcji loader. Będziemy jej przekazywać nasz request i parametry URL:

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

Z żądania otrzymamy FormData, następnie pobierzemy z niego dane w postaci obiektu, zawierającego pary klucz: wartość i za pomocą updateProduct wyślemy te dane do magazynu:

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

Pozostało tylko wejść do main.jsx i dodać funkcję action do obiektu trasy edycji. Zaimportujmy action:

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

I dodajmy go do obiektu trasy edycji:

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

Uruchom teraz aplikację, dodaj kilka produktów do listy, następnie klikając na nie wypełniaj formularz i naciskaj przycisk zapisu. Nie zapomnij wejść do panelu deweloperskiego w sekcji localforage i odświeżać magazynu. Teraz w sekcji keyvaluespairs możemy zobaczyć obiekty w tablicy products z naszymi wprowadzonymi danymi.

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzedniej lekcji. Korzystając z materiałów lekcji, stwórz funkcję action dla trasy edycji danych studenta, dodaj ją do obiektu trasy edycji. Otwórz panel deweloperski i upewnij się, że przy zmianach zaktualizowane dane faktycznie wyświetlają się na karcie localforage.