Strona sprzedawcy w Redux

Pozostało już niewiele. Zróbmy na tych zajęciach ostatnią rzecz - dodajmy do naszej aplikacji osobną stronę dla każdego sprzedawcy. Będą tu tylko już znane Ci działania. Zabierzmy się do pracy.

Otwórzmy naszą aplikację z produktami, a w niej folder sellers. Stwórzmy w tym folderze plik SellerPage.jsx. Teraz zaczniemy pisać kod SellerPage dla naszego komponentu:

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

Na początek pobierzmy id sprzedawcy i po nim znajdźmy obiekt potrzebnego sprzedawcy w slicie:

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

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

Następnie poniżej w kodzie dla SellerPage po pobraniu sprzedawcy pobierzmy wszystkie produkty, a następnie wybierzmy z nich tylko te, które zostały wystawione przez danego sprzedawcę:

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

A następnie z nazw wybranych produktów stwórzmy listę przy użyciu map. Przy czym każda nazwa produktu na tej liście będzie linkiem do strony tego produktu:

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

I na końcu kodu dla SellerPage zwróćmy layout: nagłówek z nazwą sprzedawcy i listę produktów, które wystawił ten sprzedawca:

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

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

Oczywiście potrzebujemy jeszcze trasy dla strony sprzedawcy. Otwórzmy plik App.jsx i dodajmy go jako ostatni do tras potomnych:

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

Nie zapomnij zaimportować niezbędnych hooks i komponentów do SellersPage.jsx i App.jsx.

Uruchommy naszą aplikację, załadujmy produkty, a następnie w menu po lewej stronie kliknijmy na link 'Sellers'. Teraz możemy wejść na stronę dowolnego sprzedawcy, klikając na jego nazwę, a następnie na jego stronie zobaczyć wszystkie jego produkty. A, klikając na dowolny z jego produktów, wejdziemy na stronę z tym produktem.

Na tym na razie koniec. Poznaliśmy podstawy Redux do tworzenia aplikacji i nawet trochę głębiej. Zapoznaliśmy się z różnymi przydatnymi narzędziami. Życzę Ci powodzenia w tworzeniu Twoich aplikacji Redux!