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:

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

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

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

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

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

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

Otevřete vaši aplikaci se studenty. Po prostudování materiálu lekce ve složce teachers vytvořte soubor TeachersList.jsx. Pomocí této komponenty budete zobrazovat seznam učitelů. Importujte do ní potřebné komponenty a hooky.

Napište kód pro komponentu TeachersList, získejte v ní všechny učitele a vytvořte seznam učitelů teachersToRender, nechť v každém řádku tohoto seznamu se zobrazí jejich příjmení a iniciály a v závorce předmět, který učí. Nechť každé příjmení s iniciálami bude odkazem, který vede na samostatnou stránku pro každého učitele. Poté na konci kódu komponenty vraťte kód s nadpisem a vytvořeným seznamem.

Na konci souboru teachersSlice.js vytvořte pár funkcí-selektorů selectAllTeachers a selectTeacherById, jak je ukázáno v lekci.

V App.jsx připojte další podřízenou trasu pro stránku s učiteli.

V souboru root.jsx v menu pro 'Teachers' nahraďte tag a NavLink, jak je ukázáno v lekci. Udělejte to tak, aby aktivní odkaz v menu byl nějak zvýrazněn, přidáním pro tento účel stylů do index.css.