Értékesítő oldala a Redux-ban

Már csak a vége fele járunk. Ezen az órán tegyük meg az utolsó dolgot - adjuk hozzá alkalmazásunkhoz egy külön oldalt minden egyes értékesítő számára. Itt csak már ismert műveletek lesznek. Vágjunk bele.

Nyissuk meg a termékeinkkel rendelkező alkalmazásunkat, és benne a sellers mappát. Hozzunk létre ebben a mappában egy SellerPage.jsx fájlt. Most kezdjük el írni a SellerPage komponensünk kódját:

sellers/SellersPage.jsxexport const SellerPage = () => {}

Először szerezzük meg az értékesítő azonosítóját, és ezzel keressük meg a megfelelő értékesítő objektumot a slice-ban:

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Ezután a SellerPage kódjában, az értékesítő lekérése után, lekérjük az összes terméket, majd kiválasztjuk közülük csak azokat, amelyeket ez az értékesítő hozott létre:

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

Majd a kiválasztott termékek neveiből képezzünk listát a map segítségével. Sőt, minden egyes terméknév ebben a listában link lesz az adott termék oldalára:

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

Végül a SellerPage kódjának végén adjuk vissza a JSX-t: egy címet az értékesítő nevével és egy listát azokról a termékekről, amelyeket ez az értékesítő hozott létre:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Értékesítő: {seller.name}</h2>

  <ul>{productNames}</ul>
  </div>
)

Természetesen szükségünk van egy útvonalra az értékesítő oldalához. Nyissuk meg a App.jsx fájlt és adjuk hozzá utolsóként a gyermek útvonalakhoz:

App.jsx{
  path: '/sellers/:sellerId',
  element: <SellerPage />,
},

Ne felejtsd el importálni a szükséges hook-okat és komponenseket a SellersPage.jsx és a App.jsx fájlokba.

Indítsuk el az alkalmazásunkat, töltsük be a termékeket, majd a bal oldali menüben kattintsunk a 'Eladók' linkre. Most már beléphetünk bármelyik értékesítő oldalára a nevére kattintva, majd az oldalán megtekinthetjük az összes termékét. És bármelyik termékre kattintva, beléphetünk az adott termék oldalára.

Egyelőre ennyi. Megtanultuk a Redux alapjait alkalmazások létrehozásához, sőt egy kicsit mélyebben is. Megismerkedtünk különböző hasznos eszközökkel. Sok sikert kívánok a ti Redux-alkalmazásaitok létrehozásához!