Страница редактирования продукта в браузере в Redux
На прошлом занятии мы сделали форму для редактирования продукта. Давайте прицепим для нее маршрут.
Откроем наше приложение с продуктами,
а в нем файл App.jsx и добавим еще
один объект дочернего маршрута в
массив для свойства children (не
забудьте импортировать EditProductForm):
{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
Также для перехода на формочку редактирования
нам нужно сделать ссылку. Откроем для этого
ProductPage.jsx и разместим эту ссылку в
возвращаемой верстке после последнего абзаца
с количеством продукта и перед закрывающим дивом:
<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 в верстке на
страничке студента для перехода на
страничку редактирования его данных.
Запустите ваше приложение, попробуйте отредактировать данные какого-нибудь студента. Обратите внимание на адресную строку браузера, когда вы находитесь на страничке редактирования. Посмотрите изменения в Redux DevTools браузера.