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:

app/root.jsximport { 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:

app/root.jsx<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:

app/root.jsx<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:

products/ProductsList.jsximport { 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:

products/ProductsList.jsxreturn (
  <div>
    <NewProductForm />
    <div>
      <h2>Products</h2>
      {dispProducts}
    </div>
  </div>
)

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

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:

App.jsximport { ProductsList } from './parts/products/ProductsList'

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

App.jsxconst 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:

App.jsxchildren: [
  {
    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'.