Stran za urejanje izdelka v brskalniku v Redux

V prejšnji lekciji smo naredili obrazec za urejanje izdelka. Dajmo dodajmo pot zanjo.

Odprimo našo aplikacijo z izdelki, in v njej datoteko App.jsx ter dodajmo še en objekt podrejene poti v matriko za lastnost children (ne pozabite uvoziti EditProductForm):

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

Tudi za prehod na obrazec za urejanje moramo narediti povezavo. Za to odprimo ProductPage.jsx in postavimo to povezavo v vrnjeno kodo po zadnjem odstavku s količino izdelka in pred zapiralnim div:

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

Uvažamo tudi Link iz knjižnice usmerjevalnika:

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

Zaženimo našo aplikacijo in kliknimo na gumb za ogled katerega koli izdelka. Poskusimo ga urediti in se vrnimo nazaj k seznamu izdelkov s klikom na povezavo 'Products' v levem meniju. Prav tako v Redux DevTools lahko vidite novo akcijo productUpdated in si ogledate spremembe objekta z izdelkom v store.

Odprite vašo aplikacijo s študenti. V datoteki App.jsx dodajte še eno podrejeno pot za urejanje podatkov študenta.

Dodajte element Link v kodi na strani študenta za prehod na stran za urejanje njegovih podatkov.

Zaženite vašo aplikacijo, poskusite urediti podatke katerega koli študenta. Bodite pozorni na naslovno vrstico brskalnika, ko se nahajate na strani za urejanje. Oglejte si spremembe v Redux DevTools brskalnika.