Produkta rediģēšanas lapa pārlūkprogrammā Redux

Iepriekšējā nodarbībā mēs izveidojām formu produkta rediģēšanai. Tagad pievienosim tai maršrutu.

Atvērsim mūsu produktu lietotni, un tajā failu App.jsx un pievienosim vēl vienu pakārtotā maršruta objektu massīvā īpašībai children (neaizmirstiet importēt EditProductForm):

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

Arī, lai pārietu uz rediģēšanas formu, mums ir jāizveido saite. Lai to izdarītu, atveriet ProductPage.jsx un ievietojiet šo saiti atgrieztajā izkārtojumā aiz pēdējā rindkopas ar produkta daudzumu un pirms noslēdzošā div:

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

Arī importējiet Link no maršrutētāja bibliotēkas:

products/ProductPage.jsximport { Link } from 'react-router-dom'

Palaidīsim mūsu lietotni un noklikšķināsim uz kāda produkta skatīšanas pogas. Mēģināsim to rediģēt un atgriezīsimies atpakaļ pie produktu saraksta, noklikšķinot uz saites 'Products' kreisajā izvēlnē. Arī Redux DevTools varat redzēt jaunu darbību productUpdated un apskatīt izmaiņas produkta objektā store.