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:

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

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

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

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

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

I dodajmy go do obiektu trasy edycji:

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