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

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

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

Takođe importujmo Link iz biblioteke rutera:

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