Lista sprzedawców w Redux

Na poprzednich zajęciach skończyliśmy z głównym materiałem. Teraz za pomocą thunk otrzymujemy listę produktów z serwera i możemy zapisać na serwerze nowy produkt. Zajmijmy się sprzedawcami. W końcu otrzymujemy dane i dla nich. Zróbmy osobną stronę z listą sprzedawców.

Otwórzmy naszą aplikację z produktami, a w niej folder sellers. Stwórzmy w tym folderze plik SellersList.jsx. Tutaj będziemy używać useSelector, Link i selectAllSellers, którego kod napiszemy w sellersSlice.js nieco później:

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

Następnie stwórzmy sam SellersList. W nim otrzymamy wszystkich sprzedawców za pomocą hooka useSelector, następnie otrzymamy wersję do listy sprzedawców w pętli map, przy czym każda nazwa sprzedawcy będzie prowadzić na jego stronę. I na koniec zwróćmy wersję z nagłówkiem i uzyskaną listą:

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

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

Następnie wejdźmy do pliku sellersSlice.js i analogicznie do selektorów w productsSlice.js stwórzmy na samym końcu pliku dwa selektory po eksporcie reducera:

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

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

Teraz musimy przepisać trasę dla strony z listą, w tym celu otwórzmy plik App.jsx i w tablicę tras potomnych children dodajmy jeszcze jeden obiekt (nie zapomnijcie zaimportować komponentu SellersList):

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

Aby nasz link 'Sellers' w menu zaczął działać, wejdźmy do pliku root.jsx (jak dawno to było ... ) i zamieńmy tag a na element NavLink:

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

I ostatnie. Aby w naszym menu podświetlał się aktywny link, i było zrozumiale na której stronie się znajdujemy, dodajmy styl w index.css:

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

Uruchommy naszą aplikację. Teraz możemy wejść na stronę ze sprzedawcami, klikając na 'Sprzedawcy' w menu. Oczywiście wcześniej trzeba kliknąć na 'Produkty' w menu, inaczej nasze produkty się nie załadują. Na następnej lekcji zrobimy stronę dla każdego sprzedawcy i na tym zakończymy naukę z tego podręcznika po Redux.