Stránka prodejce v Redux

Zbývá už jen málo. Pojďme v této lekci udělat poslední věc - přidat do naší aplikace samostatnou stránku pro každého prodejce. Půjdou zde pouze již vám známé akce. Pusťme se do toho.

Otevřeme naši aplikaci s produkty, a v ní složku sellers. Vytvořme v této složce soubor SellerPage.jsx. Nyní začneme psát kód SellerPage pro náš komponent:

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

Pro začátek získáme id prodejce a podle něj najdeme objekt potřebného prodejce ve slici:

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

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

Dále níže v kódu pro SellerPage po získání prodejce získáme všechny produkty, a poté vybereme z nich pouze ty, které jsou vystaveny daným prodejcem:

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

A dále z názvů vybraných produktů vytvoříme seznam pomocí map. Přičemž každý název produktu v tomto seznamu bude odkazem na stránku tohoto 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 pro SellerPage vrátíme verst: nadpis s názvem prodejce a seznam produktů, které vystavil tento prodejce:

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

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

Samozřejmě ještě potřebujeme trasu pro stránku prodejce. Otevřeme soubor App.jsx a přidejme ji jako poslední k podřízeným trasám:

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

Nezapomeňte importovat potřebné haky a komponenty do SellersPage.jsx a App.jsx.

Spustíme naši aplikaci, načteme produkty, a poté v menu vlevo klikneme na odkaz 'Sellers'. Nyní můžeme přejít na stránku libovolného prodejce kliknutím na jeho název, a poté na jeho stránce uvidět všechny jeho produkty. A kliknutím na libovolný z jeho produktů přejdeme na stránku s tímto produktem.

To je prozatím vše. Prostudovali jsme základy Redux pro vytváření aplikací a dokonce i trochu hlouběji. Seznámili jsme se s různými užitečnými nástroji. Přeji vám hodně štěstí při vytváření vašich Redux aplikací!