Pagina de editare a produsului în browser în Redux

În lecția precedentă am creat un formular pentru editarea produsului. Să atasăm o rută pentru acesta.

Deschideți aplicația noastră cu produsele, iar în ea fișierul App.jsx și adăugați încă un obiect de rută copil în matricea pentru proprietatea children (nu uitați să importați EditProductForm):

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

De asemenea, pentru a naviga către formularul de editare trebuie să creăm un link. Pentru aceasta deschideți ProductPage.jsx și plasați acest link în marcajul returnat după ultimul paragraf cu cantitatea produsului și înainte de div-ul de închidere:

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

De asemenea, importați Link din biblioteca router-ului:

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

Porniți aplicația noastră și faceți clic pe butonul de vizualizare a unui produs. Încercați să îl editați și reveniți înapoi la lista de produse, făcând clic pe link-ul 'Products' din meniul din stânga. De asemenea, în Redux DevTools puteți vedea o nouă acțiune productUpdated și puteți observa modificările obiectului produs în store.

Deschideți aplicația voastră cu studenții. În fișierul App.jsx adăugați încă o rută copil pentru editarea datelor studentului.

Adăugați un element Link în marcajul de pe pagina studentului pentru a naviga către pagina de editare a datelor sale.

Porniți aplicația voastră, încercați să editați datele unui student. Acordați atenție bara de adresă a browser-ului când vă aflați pe pagina de editare. Verificați modificările în Redux DevTools din browser.