Rediger produktside i nettleseren i Redux

I forrige forelesning lagde vi et skjema for redigering av produkt. La oss legge til en rute for det.

Åpne applikasjonen vår med produkter, og i den filen App.jsx og legg til enda ett objekt for barerute i matrisen for egenskapen children (ikke glem å importere EditProductForm):

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

Også for å gå til redigeringsskjemaet trenger vi å lage en lenke. Åpne for dette ProductPage.jsx og plasser denne lenken i markupen som returneres etter siste avsnitt med produktantall og før den avsluttende div-en:

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

Importer også Link fra ruterbiblioteket:

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

La oss starte applikasjonen vår og klikke på knappen for visning av et hvilket som helst produkt. La oss prøve å redigere det og gå tilbake til produktlisten ved å klikke på lenken 'Products' i menyen til venstre. Også i Redux DevTools kan du se en ny handling productUpdated og se på endringer av produktobjektet i store.

Åpne applikasjonen din med studenter. I filen App.jsx legg til enda en barerute for redigering av studentdata.

Legg til elementet Link i markupen på studentsiden for å navigere til siden for redigering av deres data.

Start applikasjonen din, prøv å redigere dataene til en student. Legg merke til adresselinjen i nettleseren når du er på redigeringssiden. Se endringene i Redux DevTools i nettleseren.