Seznam prodejců v Reduxu

V předchozích lekcích jsme dokončili hlavní materiál. Nyní pomocí thunk získáme seznam produktů ze serveru a můžeme uložit nový produkt na server. Pojďme se vypořádat s prodejci. Koneckonců získáváme data i pro ně. Vytvořme samostatnou stránku se seznamem prodejců.

Otevřeme naši aplikaci s produkty a v ní složku sellers. Vytvořme v této složce soubor SellersList.jsx. Zde budeme používat useSelector, Link a selectAllSellers, jehož kód napíšeme v sellersSlice.js o něco později:

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

Dále vytvoříme samotný SellersList. V něm získáme všechny prodejce pomocí hooku useSelector, poté získáme kód pro seznam prodejců ve smyčce map, přičemž každý název prodejce nás povede na jeho stránku. A na konci vrátíme kód s nadpisem a získaným seznamem:

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>
  )
}

Poté přejdeme do souboru sellersSlice.js a analogicky k selektorům v productsSlice.js vytvoříme na samém konci souboru dva selektory po exportu reduceru:

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

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

Nyní musíme nastavit trasu pro stránku se seznamem, proto otevřeme soubor App.jsx a do pole podřízených tras children přidáme další objekt (nezapomeňte importovat komponentu SellersList):

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

Aby náš odkaz 'Sellers' v menu fungoval, přejděme do souboru root.jsx (jak je to dávno co bylo ... ) a nahraďme tag a elementem NavLink:

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

A nakonec. Aby se v našem menu zvýraznil aktivní odkaz a bylo jasné, na které stránce se nacházíme, přidáme styl do index.css:

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

Spustíme naši aplikaci. Nyní můžeme přejít na stránku s prodejci kliknutím na 'Sellers' v menu. Samozřejmě předtím je třeba kliknout na 'Products' v menu, jinak se naše produkty nenačtou. V příští lekci vytvoříme stránku pro každého prodejce a tím ukončíme studium tohoto učebního textu pro Redux.