Toote redigeerimisleht brauseris Reduxis

Eelmisel tunnil tegime vormi toote redigeerimiseks. Paneme selle jaoks marsruudi külge.

Avame oma tooterakenduse, ja selles faili App.jsx ja lisame veel ühe lapsemarsruudi objekti massiivi omadusele children (ärge unustage importida EditProductForm):

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

Samuti peame redigeerimisvormile liikumiseks tegema lingi. Avame selle jaoks ProductPage.jsx ja asetame selle lingi tagastatavas märgistuses peale viimast lõiku toote kogusega ja enne sulguvat div'i:

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

Samuti importige Link marsruuteriteegist:

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

Käivitame oma rakenduse ja klõpsame mõne toote vaatamise nupul. Proovime seda redigeerida ja pöördume tagasi toodete nimekirja juurde, klõpsates lingil 'Products' vasakus menüüs. Samuti Redux DevTools's näete uut aktsiooni productUpdated ja saate vaadata muudatusi tooteobjektis poes.

Avage oma õpilasterakendus. Failis App.jsx lisage veel üks lapse marsruut õpilase andmete redigeerimiseks.

Lisage element Link õpilase lehe märgistuses, et minna tema andmete redigeerimislehele.

Käivitage oma rakendus, proovige redigeerida mõne õpilase andmeid. Pöörake tähelepanu brauseri aadressiribale, kui olete redigeerimislehel. Vaadake muudatusi brauseri Redux DevTools's.