Faqja e Redaktimit të Produktit në Shfletues në Redux

Në seancën e kaluar, ne krijuam një formular për redaktimin e produktit. Le të shtojmë një rrugë për të.

Le të hapim aplikacionin tonë të produkteve, dhe në të skedarin App.jsx dhe të shtojmë edhe një objekt rruge fëmijë në vargun për vetinë children (mos harroni të importoni EditProductForm):

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

Gjithashtu për të kaluar në formularin e redaktimit na duhet të bëjmë një lidhje. Për këtë, le të hapim ProductPage.jsx dhe ta vendosim këtë lidhje në HTML-në e kthyer pas paragrafit të fundit me sasinë e produktit dhe përpara div-it mbyllës:

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

Gjithashtu importoni Link nga libraria e ruterit:

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

Le të nisim aplikacionin tonë dhe të klikojmë te butoni i shikimit të ndonjë produkti. Le të provojmë ta redaktojmë atë dhe të kthehemi prapa në listën e produkteve, duke klikuar në lidhjen 'Products' në menunë majtas. Gjithashtu në Redux DevTools ju mund të shihni një aksion të ri productUpdated dhe të shikoni ndryshimet e objektit të produktit në store.

Hapni aplikacionin tuaj me studentët. Në skedarin App.jsx shtoni një rrugë fëmijë tjetër për redaktimin e të dhënave të studentit.

Shtoni një element Link në HTML-në e faqes së studentit për të kaluar në faqen e redaktimit të të dhënave të tij.

Nisni aplikacionin tuaj, provoni të redaktoni të dhënat e ndonjë studenti. Kushtojini vëmendje rreshtit të adresave të shfletuesit, kur jeni në faqen e redaktimit. Shikoni ndryshimet në Redux DevTools të shfletuesit.