Страница редактирования продукта в браузере в Redux

На прошлом занятии мы сделали форму для редактирования продукта. Давайте прицепим для нее маршрут.

Откроем наше приложение с продуктами, а в нем файл App.jsx и добавим еще один объект дочернего маршрута в массив для свойства children (не забудьте импортировать EditProductForm):

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

Также для перехода на форму редактирования нам нужно сделать ссылку. Откроем для этого ProductPage.jsx и разместим эту ссылку в возвращаемой верстке после последнего абзаца с количеством продукта и перед закрывающим дивом:

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.