Stránka pro editaci produktu v prohlížeči v Redux

V minulé lekci jsme vytvořili formulář pro editaci produktu. Pojďme k němu přidat trasu.

Otevřeme naši aplikaci s produkty, a v ní soubor App.jsx a přidáme další objekt podřízené trasy do pole pro vlastnost children (nezapomeňte importovat EditProductForm):

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

Také pro přechod na formulář editace potřebujeme vytvořit odkaz. Otevřeme k tomu ProductPage.jsx a umístíme tento odkaz do vráceného kódu po posledním odstavci s množstvím produktu a před zavíracím divem:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Také importujeme Link z knihovny routeru:

import { Link } from 'react-router-dom'

Spustíme naši aplikaci a klikneme na tlačítko zobrazení nějakého produktu. Zkusme ho upravit a vraťme se zpět k seznamu produktů kliknutím na odkaz 'Products' v levé nabídce. Také v Redux DevTools můžete vidět novou akci productUpdated a podívat se na změny objektu s produktem v store.

Otevřete vaši aplikaci se studenty. V souboru App.jsx přidejte další podřízenou trasu pro editaci dat studenta.

Přidejte element Link do kódu stránky studenta pro přechod na stránku editace jeho dat.

Spusťte vaši aplikaci, zkuste upravit data nějakého studenta. Všimněte si adresního řádku prohlížeče, když se nacházíte na stránce editace. Sledujte změny v Redux DevTools prohlížeče.