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

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

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

Samuti importige Link marsruuteriteegist:

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