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

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

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

Uvažamo tudi Link iz knjižnice usmerjevalnika:

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

Задание 1

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

Задание 2

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

Задание 3

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.