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

Адчынiце ваша прыкладанне са студэнтамі. У файле App.jsx дадайце яшчэ адзін даччыны маршрут для рэдагавання дадзеных студэнта.

Дадайце элемент Link у вёрстцы на старончцы студэнта для пераходу на старончку рэдагавання яго дадзеных.

Запусціце ваша прыкладанне, паспрабуйце адрэдагаваць дадзеныя якога-небудзь студэнта. Звярніце ўвагу на адрасны радок браўзэра, калі вы знаходзіцеся на старончы рэдагавання. Паглядзіце змены ў Redux DevTools браўзэра.