Eladók listája a Redux-ban

Az előző órákon befejeztük az alapanyagot. Most a thunk segítségével lekérjük a termékek listáját a szerverről, és el tudjuk menteni egy új terméket a szerverre. Foglalkozzunk az eladókkal. Hiszen adatokat kapunk értük is. Készítsünk egy külön oldalt az eladók listájával.

Nyissuk meg a termékalkalmazásunkat, és benne a sellers mappát. Hozzunk létre ebben a mappában a SellersList.jsx fájlt. Itt fogjuk használni a useSelector, Link és a selectAllSellers-t, amelynek kódját kiírjuk a sellersSlice.js-ben kicsit később:

sellers/SellersList.jsximport { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Ezután hozzuk létre magát a SellersList-et. Ebben megkapjuk az összes eladót a useSelector hook segítségével, majd megkapjuk a listaelemeket az eladók listájához a map ciklussal, ahol minden eladó neve egy link lesz a saját oldalára. És a végén adjuk vissza a HTML-t a címmel és a kapott listával:

sellers/SellersList.jsxexport const SellersList = () => {
  const sellers = useSelector(selectAllSellers)
  const sellersToRender = sellers.map((seller) => (
    <li key={seller.id}>
      <Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
    </li>
  ))

  return (
    <div>
      <h2>Sellers:</h2>

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

Ezután menjünk a sellersSlice.js fájlba, és hasonlóan a szelektorokhoz a productsSlice.js-ben, hozzunk létre a fájl legvégén, a reducer exportja után két szelektort:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Most meg kell adnunk az útvonalat a listaoldalhoz, ehhez nyissuk meg a App.jsx fájlt, és a gyermek útvonalak children tömbjéhez adjunk hozzá még egy objektumot (ne felejtsük el importálni a SellersList komponenst):

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

Hogy a 'Sellers' menüben lévő linkünk működjön, menjünk a root.jsx fájlba (milyen régen volt ez ... ) és cseréljük le a a tag-et a NavLink elemre:

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

És az utolsó. Hogy a menüben kijelölődjon az aktív link, és egyértelmű legyen, melyik oldalon vagyunk, adjunk hozzá stílust a index.css-be:

index.cssnav a.active {
  color: purple;
}

Indítsuk el az alkalmazásunkat. Most már beléphetünk az eladók oldalára a 'Sellers'-re kattintva a menüben. Természetesen előbb kattintsunk a 'Products'-re a menüben, különben a termékeink nem töltődnek be. A következő leckén minden eladóhoz készítünk egy oldalt, és ezzel befejezzük a Redux tananyagának tanulmányozását.