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

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

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

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

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