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

В предишния урок създадохме форма за редактиране на продукт. Нека добавим маршрут за нея.

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

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

Също така, за да преминем към формата за редактиране трябва да създадем връзка. За целта нека отворим ProductPage.jsx и поставим тази връзка в върнатия markup след последния параграф с количеството на продукта и преди затварящия 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 в markup-а на страницата на студента за преминаване към страницата за редактиране на неговите данни.

Стартирайте вашето приложение, опитайте да редактирате данните на някой студент. Обърнете внимание на адресната лента на браузъра, когато сте на страницата за редактиране. Проверете промените в Redux DevTools на браузъра.