Rad sa podacima u Redux-u

U prethodnoj sekciji smo implementirali osnovnu shemu rada Redux-a i sada znate glavne principe rada Redux aplikacije. U narednim lekcijama ćemo početi da dopunjavamo funkcionalnost naše aplikacije sa proizvodima i radićemo sa podacima.

Pošto će aplikacija dobijati nove komponente i rute, hajde da uradimo jednu stvar sa rutiranjem. Otvorite aplikaciju sa proizvodima, zatim fajl root.jsx. Importujte u njega komponentu Outlet, pri tome obrišite linije sa importom ProductsList i NewProductForm:

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

Sada će komponenta Root biti prikazana na korenskoj putanji '/', a sve druge komponente na podrutanama u Outlet. Za ovo ćemo malo ispraviti markup div-a #main-page za komponentu Root:

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

Ovde ćemo staviti Outlet umesto komponenti NewProductForm i ProductsList:

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

Formu za dodavanje proizvoda sada ćemo prikazivati u ProductsList. Hajde da otvorimo fajl sa ovom komponentom i dodamo import forme:

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

A sada dodajmo komponentu sa formom tačno ispred liste proizvoda. Sada će naš markup izgledati ovako:

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

Dopisaćemo stil za klasu products-list u index.css:

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

Ostaje nam samo da unesemo izmene u glavnu komponentu App. Otvorimo App.jsx i importujmo u nju komponentu ProductsList:

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

Zatim za našu još uvek jedinu rutu, koja je korenska, dodajmo svojstvo children:

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

I propisaćemo kao vrednost ovog svojstva prvu podrutu. Kao putanju podešićemo mu 'products'. Sada će na ovoj adresi biti prikazana naša lista sa proizvodima ProductsList:

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

Pokrenimo našu aplikaciju i uverimo se da nismo ništa pokvarili. U korenu '/' vidimo samo naslov. A formica i lista proizvoda su nam sakrivene na adresi '/products'.