Strona edycji produktu w przeglądarce w Redux

Na poprzednich zajęciach stworzyliśmy formularz do edycji produktu. Dodajmy dla niego trasę.

Otwórzmy naszą aplikację z produktami, a w niej plik App.jsx i dodajmy jeszcze jedną podrzędną trasę w tablicy dla właściwości children (nie zapomnij zaimportować EditProductForm):

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

Również do przejścia do formularza edycji potrzebujemy stworzyć link. Otwórzmy w tym celu ProductPage.jsx i umieśćmy ten link w zwracanym kodzie HTML po ostatnim akapicie z ilością produktu i przed zamykającym divem:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Również zaimportujmy Link z biblioteki routera:

import { Link } from 'react-router-dom'

Uruchommy naszą aplikację i kliknijmy na przycisk podglądu jakiegoś produktu. Spróbujmy go edytować i wróćmy z powrotem do listy produktów, klikając na link 'Products' w menu po lewej stronie. Również w Redux DevTools możesz zobaczyć nową akcję productUpdated i zobaczyć zmiany obiektu z produktem w store.

Otwórz twoją aplikację ze studentami. W pliku App.jsx dodaj jeszcze jedną podrzędną trasę dla edycji danych studenta.

Dodaj element Link w kodzie HTML na stronie studenta dla przejścia na stronę edycji jego danych.

Uruchom twoją aplikację, spróbuj edytować dane jakiegoś studenta. Zwróć uwagę na pasek adresu przeglądarki, gdy jesteś na stronie edycji. Spójrz na zmiany w Redux DevTools przeglądarki.