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

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

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

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

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

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

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

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

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

Отворите вашу апликацију са студентима. У фајлу App.jsx додајте још једну детет руту за уређивање података студента.

Додајте елемент Link у HTML-у на страни студента за прелазак на страницу за уређивање његових података.

Покрените вашу апликацију, покушајте да измените податке неког студента. Обратите пажњу на адресну линију прегледача када сте на страници за уређивање. Погледајте измене у Redux DevTools прегледача.