Страна уређивања производа у прегледачу у Redux-у

На прошлом часу смо направили форму за уређивање производа. Хајде да додамо руту за њу.

Отворимо нашу апликацију са производима, а у њој фајл App.jsx и додајмо још један објекат детет руте у низ за својство children (не заборавите да увезете EditProductForm):

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

Такође за прелазак на форму за уређивање потребно је да направимо везу. Отворимо за ово ProductPage.jsx и поставимо ову везу у враћеном HTML-у после последњег пасуса са количином производа и пре затварајућег div-а:

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

Такође увезимо Link из библиотеке за рутирање:

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

Покренимо нашу апликацију и кликнимо на дугме прегледа било ког производа. Покушајмо да га изменимо и вратимо се назад на листу производа, кликнувши на везу 'Products' у менију са леве стране. Такође у Redux DevTools можете да видите нову акцију productUpdated и погледате измене објекта са производом у store-у.