Produkto redagavimo puslapis naršyklėje su Redux

Ankstesnėje pamokoje mes sukūrėme formą produktui redaguoti. Pridėkime jai maršrutą.

Atidarykime mūsų produktų aplikaciją, o joje failą App.jsx ir pridėkime dar vieną vaikinio maršruto objektą į massyvą savybei children (nepamirškite importuoti EditProductForm):

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

Taip pat, norint pereiti į redagavimo formą, mums reikia sukurti nuorodą. Tam atidarykime ProductPage.jsx ir įdėkime šią nuorodą į grąžinamą markup'ą po paskutine pastraipa su produkto kiekiu ir prieš uždarantį div:

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

Taip pat importuokime Link iš maršrutizavimo bibliotekos:

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

Paleiskime mūsų aplikaciją ir spustelėkime bet kurio produkto peržiūros mygtuką. Pabandykime jį paredaguoti ir grįžkime atgal į produktų sąrašą, spustelėję nuorodą 'Products' kairiajame meniu. Taip pat Redux DevTools galite matyti naują action'ą productUpdated ir pamatyti pakeitimus produkto objekte store.

Atidarykite savo studentų aplikaciją. Faile App.jsx pridėkite dar vieną vaikinį maršrutą studento duomenų redagavimui.

Pridėkite elementą Link į markup'ą studento puslapyje, kad pereitumėte į jo duomenų redagavimo puslapį.

Paleiskite savo aplikaciją, pabandykite paredaguoti kokio nors studento duomenis. Atkreipkite dėmesį į naršyklės adreso eilutę, kai esate redagavimo puslapyje. Pažiūrėkite pakeitimus naršyklės Redux DevTools.