Zoznam predajcov v Reduxe

Na predchádzajúcich hodinách sme skončili s hlavnou náplňou. Teraz pomocou thunku získavame zoznam produktov zo servera a môžeme uložiť nový produkt na server. Poďme sa pozrieť na predajcov. Veď získavame údaje aj pre nich. Urobme samostatnú stránku so zoznamom predajcov.

Otvorme našu aplikáciu s produktami a v nej priečinok sellers. Vytvorme v tomto priečinku súbor SellersList.jsx. Tu budeme používať useSelector, Link a selectAllSellers, ktorého kód napíšeme v sellersSlice.js o čosi neskôr:

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

Ďalej vytvorme samotný SellersList. V ňom získame všetkých predajcov pomocou hooku useSelector, potom získame verštovanie pre zoznam predajcov v cykle map, pričom každý názov predajcu nás bude viesť na jeho stránku. A na konci vráťme verštovanie s nadpisom a získaným zoznamom:

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>Predajcovia:</h2>

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

Potom prejdime do súboru sellersSlice.js a analogicky s selektormi v productsSlice.js vytvorme na samom konci súboru dva selektory po exporte redukora:

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

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

Teraz musíme dopísať trasu pre stránku so zoznamom, preto otvorme súbor App.jsx a do poľa podradených trás children pridajme ďalší objekt (nezabudnite importovať komponent SellersList):

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

Aby nám odkaz 'Predajcovia' v menu fungoval, poďme do súboru root.jsx (ako dávno to bolo ... ) a nahraďme tag a elementom NavLink:

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

A posledné. Aby sa v našom menu zvýraznil aktívny odkaz a bolo zrejmé, na akej stránke sa nachádzame, pridáme štýl do index.css:

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

Spustíme našu aplikáciu. Teraz môžeme ísť na stránku s predajcami kliknutím na 'Predajcovia' v menu. Samozrejme, najprv je potrebné kliknúť na 'Produkty' v menu, inak sa naše produkty nenačítajú. V nasledujúcej lekcii urobíme stránku pre každého predajcu a tým ukončíme štúdium tohto tutoriálu pre Redux.