Pagina di modifica del prodotto nel browser in Redux

Nella lezione precedente abbiamo creato un modulo per la modifica del prodotto. Ora aggiungiamo una route per esso.

Apriamo la nostra applicazione dei prodotti, e in essa il file App.jsx e aggiungiamo un ulteriore oggetto di route figlio nell'array per la proprietà children (non dimenticate di importare EditProductForm):

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

Inoltre, per passare al modulo di modifica dobbiamo creare un link. Apriamo a tal fine ProductPage.jsx e posizioniamo questo link nel JSX restituito, dopo l'ultimo paragrafo con la quantità del prodotto e prima del div di chiusura:

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

Importiamo anche Link dalla libreria del router:

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

Avviamo la nostra applicazione e clicchiamo sul pulsante di visualizzazione di un prodotto qualsiasi. Proviamo a modificarlo e torniamo indietro alla lista dei prodotti, cliccando sul link 'Products' nel menu a sinistra. Inoltre, in Redux DevTools potete vedere una nuova azione productUpdated e osservare le modifiche all'oggetto prodotto nello store.

Aprite la vostra applicazione degli studenti. Nel file App.jsx aggiungete un'ulteriore route figlia per la modifica dei dati di uno studente.

Aggiungete un elemento Link nel JSX della pagina dello studente per passare alla pagina di modifica dei suoi dati.

Avviate la vostra applicazione, provate a modificare i dati di uno studente qualsiasi. Fate attenzione alla barra degli indirizzi del browser quando vi trovate sulla pagina di modifica. Osservate i cambiamenti in Redux DevTools del browser.