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:

import { 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ą:

export 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:

export 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):

{
	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:

<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:

nav 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.

Otwórz twoją aplikację ze studentami. Po zapoznaniu się z materiałami lekcji, w folderze teachers stwórz plik TeachersList.jsx. Za pomocą tego komponentu będziesz wyświetlać listę wykładowców. Zaimportuj do niego niezbędne komponenty i hooki.

Napisz kod dla komponentu TeachersList, uzyskaj w nim wszystkich wykładowców i zrób listę wykładowców teachersToRender, niech w każdym wierszu tej listy wyświetlają się ich nazwiska i inicjały, a w nawiasach przedmiot, który prowadzą. Niech każde nazwisko z inicjałami będą linkiem, który prowadzi na osobną stronę dla każdego wykładowcy. Następnie na końcu kodu komponentu zwróć wersję z nagłówkiem i utworzoną listą.

Na końcu pliku teachersSlice.js stwórz parę funkcji-selektorów selectAllTeachers i selectTeacherById, jak pokazano na lekcji.

W App.jsx podłącz jeszcze jedną trasę potomną dla strony z wykładowcami.

W pliku root.jsx w menu dla 'Wykładowcy' zamień tag a na NavLink, jak pokazano na lekcji. Zrób tak, aby aktywny link w menu się jakoś wyróżniał, dodając w tym celu style w index.css.