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

App.jsx{
  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:

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

Również zaimportujmy Link z biblioteki routera:

products/ProductPage.jsximport { 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.