Stránka na úpravu produktu v prehliadači v Reduxe

Na minulej hodine sme vytvorili formulár na úpravu produktu. Pridajme pre ňu trasu.

Otvorme našu aplikáciu s produktmi, a v nej súbor App.jsx a pridajme ďalší objekt podradenej trasy do pola pre vlastnosť children (nezabudnite importovať EditProductForm):

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

Tiež pre prechod na formulár úpravy potrebujeme vytvoriť odkaz. Otvorme na to ProductPage.jsx a umiestnime tento odkaz do vrátenej šablóny po poslednom odseku s množstvom produktu a pred zatváracím divom:

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

Tiež importujme Link z knižnice smerovača:

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

Spustíme našu aplikáciu a klikneme na tlačidlo zobrazenia nejakého produktu. Skúsme ho upraviť a vráťme sa späť k zoznamu produktov kliknutím na odkaz 'Products' v menu vľavo. Tiež v Redux DevTools môžete vidieť novú akciu productUpdated a pozrieť zmeny objektu s produktom v store.