Termék szerkesztési oldal a böngészőben Redux-ban

Az előző órán elkészítettük az űrlapot a termék szerkesztéséhez. Most rendeljünk hozzá egy útvonalat.

Nyissuk meg a termék alkalmazásunkat, és benne a App.jsx fájlt, és adjunk hozzá még egy gyermek útvonal objektumot a children tulajdonság számára (ne felejtsd el importálni a EditProductForm-ot):

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

Továbbá a szerkesztési űrlapra való navigáláshoz szükségünk van egy linkre. Ehhez nyissuk meg a ProductPage.jsx fájlt és helyezzük el ezt a linket a visszaadott JSX-ben, a termék mennyiségéről szóló utolsó bekezdés után és a záró div elött:

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

Importáld a Link-et is az útválasztó könyvtárából:

products/ProductPage.jsximport { Link } from 'react-router-dom'

Indítsuk el az alkalmazásunkat és kattintsunk bármelyik termék megtekintés gombjára. Próbáljuk meg szerkeszteni, majd térjünk vissza a terméklistához a bal oldali menüben lévő 'Products' linkre kattintva. A Redux DevTools-ban láthatod az új productUpdated akciót és megtekintheted a változásokat a termék objektumban a store-ban.