Старонка рэдагавання прадукту ў браўзэры ў 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.