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

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

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

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

import { 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.

Otvorte vašu aplikáciu so študentmi. V súbore App.jsx pridajte ďalšiu podradenú trasu pre úpravu údajov študenta.

Pridajte element Link do šablóny na stránke študenta pre prechod na stránku úpravy jeho údajov.

Spustite vašu aplikáciu, skúste upraviť údaje nejakého študenta. Všimnite si adresný riadok prehliadača, keď sa nachádzate na stránke úpravy. Pozrite si zmeny v Redux DevTools prehliadača.