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

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

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

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

import { 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.

Atveriet savu studentu lietotni. Failā App.jsx pievienojiet vēl vienu pakārtoto maršrutu studenta datu rediģēšanai.

Pievienojiet elementu Link izkārtojumā studenta lapā, lai pārietu uz tā datu rediģēšanas lapu.

Palaidiet savu lietotni, mēģiniet rediģēt kāda studenta datus. Pievērsiet uzmanību pārlūkprogrammas adreses joslai, kad atrodaties datu rediģēšanas lapā. Apskatiet izmaiņas pārlūkprogrammas Redux DevTools.