Adatkezelés a Redux-ban

Az előző részben megvalósítottuk a Redux alapvető működési sémáját, és most már ismered a Redux alkalmazás fő elveit. A következő leckéken elkezdjük kiegészíteni termék alkalmazásunk funkcionalitását és dolgozni fogunk az adatokkal.

Mivel az alkalmazás új komponensekkel és útvonalakkal bővül, csináljunk meg egy dolgot az útválasztással. Nyisd meg a termék alkalmazást, majd a root.jsx fájlt. Importáld bele a Outlet komponenst, miközben töröld a ProductsList és a NewProductForm importáló sorait:

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

Mostantól a Root komponensünk a gyökérútvonalon '/' jelenik meg, minden más komponens pedig a Outlet gyermekeinek útvonalán. Ehhez kicsit módosítjuk a Root komponens #main-page div elrendezését:

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

Itt a NewProductForm és ProductsList komponensek helyére a Outlet-ot tesszük:

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

A termékek hozzáadására szolgáló űrlapot mostantól a ProductsList-ben fogjuk megjeleníteni. Nyissuk meg a komponens fájlját és adjuk hozzá az űrlap importját:

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

És most adjuk hozzá az űrlap komponenst közvetlenül a terméklista elé. Mostantól a mi elrendezésünk így fog kinézni:

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

Egészítsük ki a products-list osztály stílusát a index.css fájlban:

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

Már csak a változtatásokat kell bevinnünk a fő App komponensbe. Nyissuk meg a App.jsx fájlt és importáljuk bele a ProductsList komponenst:

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

Ezután az egyetlen, gyökér útvonalunkhoz adjuk hozzá a children tulajdonságot:

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

És írjuk be ennek a tulajdonságnak az értékeként az első gyermek útvonalat. Útvonalként állítsuk be neki a 'products'-ot. Mostantól ezen a címen jelenik meg a terméklistánk ProductsList:

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

Indítsuk el az alkalmazásunkat és győződjünk meg arról, hogy nem törtünk el semmit. A gyökérben '/' csak a címet látjuk. Az űrlap és a terméklista elrejtett a '/products' cím mögött.