Stranica za uređivanje proizvoda u pretraživaču u Reduxu

Na prošlom času napravili smo formu za uređivanje proizvoda. Hajde da dodamo rutu za nju.

Otvorimo našu aplikaciju sa proizvodima, a u njoj fajl App.jsx i dodajmo još jedan objekat podrute u niz za svojstvo children (ne zaboravite da importujete EditProductForm):

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

Takođe, za prelazak na formu za uređivanje potrebno je napraviti link. Otvorimo za ovo ProductPage.jsx i postavimo ovaj link u vraćenom markup-u posle poslednjeg pasusa sa količinom proizvoda i pre zatvarajućeg div-a:

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

Takođe importujmo Link iz biblioteke rutera:

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

Pokrenimo našu aplikaciju i kliknimo na dugme pregleda nekog proizvoda. Pokušajmo da ga uredimo i vratimo se nazad na listu proizvoda, klikom na link 'Products' u meniju levo. Takođe u Redux DevTools možete videti novu akciju productUpdated i pogledati promene objekta sa proizvodom u store-u.

Otvorite vašu aplikaciju sa studentima. U fajlu App.jsx dodajte još jednu podrutu za uređivanje podataka studenta.

Dodajte element Link u markup-u na stranici studenta za prelazak na stranicu uređivanja njegovih podataka.

Pokrenite vašu aplikaciju, pokušajte da uredite podatke nekog studenta. Obratite pažnju na adresnu traku pretraživača kada se nalazite na stranici za uređivanje. Pogledajte promene u Redux DevTools pretraživača.