Práce s daty v Redux

V předchozí sekci jsme implementovali základní schema práce Redux a nyní znáte hlavní principy fungování Redux aplikace. V následujících lekcích začneme doplňovat funkcionalitu naší aplikace s produkty a budeme pracovat s daty.

Protože aplikace bude obrůstat novými komponentami a trasami, udělejme s routováním jednu věc. Otevřete aplikaci s produkty, poté soubor root.jsx. Importujte do něj komponentu Outlet, přitom odstraňte řádky s importem ProductsList a NewProductForm:

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

Nyní komponenta Root se bude zobrazovat v kořenové cestě '/', a všechny ostatní komponenty v podřízených v Outlet. Pro to trochu opravíme verstu divu #main-page pro komponentu Root:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Zde umístíme Outlet místo komponent NewProductForm a ProductsList:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<Outlet />
</div>

Formulář pro přidání produktů nyní budeme zobrazovat v ProductsList. Otevřeme soubor s touto komponentou a přidáme import formuláře:

import { NewProductForm } from './NewProductForm'

A nyní přidáme komponentu s formulářem přímo před seznam produktů. Nyní naše versta bude vypadat takto:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

Doplníme styl pro třídu products-list v index.css:

.products-list {
	display: flex;
	flex-direction: column;
}

Zbývá nám pouze provést změny v hlavní komponentě App. Otevřeme App.jsx a importujme do ní komponentu ProductsList:

import { ProductsList } from './parts/products/ProductsList'

Poté pro naši zatím jedinou trasu, která je kořenovou, přidáme vlastnost children:

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

A vypíšeme jako hodnotu této vlastnosti první podřízenou trasu. Jako cestu nastavíme jí 'products'. Nyní na této adrese se bude zobrazovat náš seznam s produkty ProductsList:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

Spustíme naši aplikaci a přesvědčíme se, že jsme nic neporušili. V kořeni '/' vidíme pouze nadpis. A formulář a seznam produktů jsme schovali na adrese '/products'.

Otevřete vaši aplikaci se studenty. V souboru root.jsx nahraďte komponenty StudentsList a NewStudentForm na Outlet.

Nechť nyní formulář pro přidání studenta se zobrazuje u vás v StudentsList.

Proveďte změny ve vaší hlavní komponentě App. Přidejte ke kořenové trase podřízenou, s cestou '/students', podle které bude zobrazován váš StudentsList. Spusťte aplikaci a přesvědčte se, že vám vše funguje.