Práca s dátami v Reduxe

V predchádzajúcej časti sme implementovali základnú schému fungovania Reduxu a teraz poznáte hlavné princípy fungovania Redux aplikácie. V nasledujúcich lekciách začneme dopĺňať funkcionalitu našej aplikácie s produktmi a budeme pracovať s dátami.

Keďže aplikácia bude obrastať novými komponentmi a trasami, urobme s smerovaním jednu vec. Otvorte aplikáciu s produktmi, potom súbor root.jsx. Importujte do neho komponent Outlet, pričom odstráňte riadky s importom ProductsList a NewProductForm:

app/root.jsximport { Outlet } from 'react-router-dom'

Teraz sa komponent Root bude zobrazovať v koreňovej ceste '/', a všetky ostatné komponenty v podradených v Outlet. Preto trochu opravíme verstku divu #main-page pre komponent Root:

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

Tu umiestnime Outlet namiesto komponentov NewProductForm a ProductsList:

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

Formulár na pridávanie produktov teraz budeme zobrazovať v ProductsList. Otvorme súbor s týmto komponentom a pridajme import formulára:

products/ProductsList.jsximport { NewProductForm } from './NewProductForm'

A teraz pridajme komponent s formulárom priamo pred zoznam produktov. Teraz bude naša verstka vyzerať takto:

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

Dopíšme štýl pre triedu products-list v index.css:

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

Zostáva nám len vykonať zmeny v hlavnom komponente App. Otvorme App.jsx a importujme do neho komponent ProductsList:

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

Potom pre našu zatiaľ jedinú trasu, ktorá je koreňová, pridajme vlastnosť children:

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

A napíšme ako hodnotu tejto vlastnosti prvú podradenú trasu. Ako cestu nastavme jej 'products'. Teraz na tejto adrese sa bude zobrazovať náš zoznam s produktami ProductsList:

App.jsxchildren: [
  {
    path: '/products',
    element: <ProductsList />,
  },
],

Spustíme našu aplikáciu a presvedčíme sa, že sme nič nepokazili. V koreni '/' vidíme len nadpis. A formulár a zoznam produktov sú nám schované na adrese '/products'.