Tuotteen muokkaussivu selaimessa Reduxissa

Edellisellä tunnilla teimme lomakkeen tuotteen muokkaamista varten. Liitetään sille reitti.

Avataan tuotesovelluksemme, ja siinä tiedosto App.jsx ja lisätään vielä yksi lapsireitin kohde taulukkoon ominaisuudelle children (älä unohda tuoda EditProductForm):

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

Myös siirtymiseksi muokkauslomakkeelle meidän on tehtävä linkki. Avataan tätä varten ProductPage.jsx ja sijoitetaan tämä linkki palautettavaan markupiin viimeisen kappaleen jälkeen tuotteen määrän kanssa ja sulkevan divin eteen:

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

Myös tuodaan Link reitittäjien kirjastosta:

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

Käynnistetään sovelluksemme ja klikataan mitä tahansa tuotteen katselunappia. Yritetään muokata sitä ja palata takaisin tuotelistaan, klikkaamalla linkkiä 'Products' vasemmassa valikossa. Myös Redux DevToolsissa voit nähdä uuden actionin productUpdated ja tarkastella muutoksia tuoteobjektissa storessa.

Avaa opiskelijasovelluksesi. Tiedostossa App.jsx lisää vielä yksi lapsireitti opiskelijan tietojen muokkaamista varten.

Lisää elementti Link opiskelijan sivun markupiin siirtymistä varten hänen tietojensa muokkaussivulle.

Käynnistä sovelluksesi, yritä muokata jonkin opiskelijan tietoja. Kiinnitä huomiota selaimen osoiteriviin, kun olet muokkaussivulla. Tarkastele muutoksia selaimen Redux DevToolsissa.