Stránka predajcu v Reduxe

Už nám zostáva len málo. Na tejto lekcii urobíme poslednú vec - pridáme do našej aplikácie samostatnú stránku pre každého predajcu. Pôjde len o vám už známe akcie. Poďme na to.

Otvorme našu aplikáciu s produktmi a v nej priečinok sellers. V tomto priečinku vytvoríme súbor SellerPage.jsx. Teraz začneme písať kód SellerPage pre náš komponent:

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

Na začiatok získame id predajcu a podľa neho nájdeme objekt potrebného predajcu v slice:

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

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

Ďalej nižšie v kóde pre SellerPage po získaní predajcu získame všetky produkty a potom vyberieme z nich len tie, ktoré sú vystavené týmto predajcom:

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

A potom z názvov vybraných produktov vytvoríme zoznam pomocou map. Pričom každý názov produktu v tomto zozname bude odkazom na stránku tohto produktu:

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

A na konci kódu pre SellerPage vrátime verziu: nadpis s menom predajcu a zoznam produktov, ktoré tento predajca vystavil:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Predajca: {seller.name}</h2>

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

Samozrejme, potrebujeme aj route pre stránku predajcu. Otvorme súbor App.jsx a pridajme ho ako posledný medzi podriadené routes:

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

Nezabudnite importovať potrebné hooks a komponenty do SellersPage.jsx a App.jsx.

Spustíme našu aplikáciu, načítame produkty, a potom v menu vľavo klikneme na odkaz 'Sellers'. Teraz môžeme ísť na stránku ľubovoľného predajcu kliknutím na jeho názov a potom na jeho stránke uvidíme všetky jeho produkty. A kliknutím na ľubovoľný z jeho produktov, prejdeme na stránku s týmto produktom.

To je zatiaľ všetko. Naučili sme sa základy Reduxu pre tvorbu aplikácie a dokonca aj trochu hĺbšie. Zoznámili sme sa s rôznymi užitočnými nástrojmi. Prajem vám veľa šťastia pri tvorbe vašich Redux aplikácií!