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

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

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

Taip pat importuokime Link iš maršrutizavimo bibliotekos:

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