Eladók listája a Redux-ban

Az előző órákon befejeztük az alapanyagot. Most a thunk segítségével lekérjük a termékek listáját a szerverről, és el tudjuk menteni egy új terméket a szerverre. Foglalkozzunk az eladókkal. Hiszen adatokat kapunk értük is. Készítsünk egy külön oldalt az eladók listájával.

Nyissuk meg a termékalkalmazásunkat, és benne a sellers mappát. Hozzunk létre ebben a mappában a SellersList.jsx fájlt. Itt fogjuk használni a useSelector, Link és a selectAllSellers-t, amelynek kódját kiírjuk a sellersSlice.js-ben kicsit később:

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

Ezután hozzuk létre magát a SellersList-et. Ebben megkapjuk az összes eladót a useSelector hook segítségével, majd megkapjuk a listaelemeket az eladók listájához a map ciklussal, ahol minden eladó neve egy link lesz a saját oldalára. És a végén adjuk vissza a HTML-t a címmel és a kapott listával:

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

Ezután menjünk a sellersSlice.js fájlba, és hasonlóan a szelektorokhoz a productsSlice.js-ben, hozzunk létre a fájl legvégén, a reducer exportja után két szelektort:

export const selectAllSellers = (state) => state.sellers

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

Most meg kell adnunk az útvonalat a listaoldalhoz, ehhez nyissuk meg a App.jsx fájlt, és a gyermek útvonalak children tömbjéhez adjunk hozzá még egy objektumot (ne felejtsük el importálni a SellersList komponenst):

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

Hogy a 'Sellers' menüben lévő linkünk működjön, menjünk a root.jsx fájlba (milyen régen volt ez ... ) és cseréljük le a a tag-et a NavLink elemre:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

És az utolsó. Hogy a menüben kijelölődjon az aktív link, és egyértelmű legyen, melyik oldalon vagyunk, adjunk hozzá stílust a index.css-be:

nav a.active {
	color: purple;
}

Indítsuk el az alkalmazásunkat. Most már beléphetünk az eladók oldalára a 'Sellers'-re kattintva a menüben. Természetesen előbb kattintsunk a 'Products'-re a menüben, különben a termékeink nem töltődnek be. A következő leckén minden eladóhoz készítünk egy oldalt, és ezzel befejezzük a Redux tananyagának tanulmányozását.

Nyissa meg a diákalkalmazását. Tanulmányozva a lecke anyagát, a teachers mappában hozza létre a TeachersList.jsx fájlt. Ezzel a komponenssel fogja kiírni az oktatók listáját. Importálja ide a szükséges komponenseket és hook-okat.

Írja meg a TeachersList komponens kódját, szerezze be benne az összes oktatót, és készítsen egy oktatók listáját teachersToRender, minden sorban jelenjenek meg a vezetéknevük és a kezdőbetűjük, zárójelben pedig a tárgy, amelyet oktatnak. Minden név legyen egy link, amely az adott oktató külön oldalára vezet. Majd a komponens kódjának végén adja vissza a HTML-t a címmel és a létrehozott listával.

A teachersSlice.js fájl végén hozzon létre egy pár szelektor-függvényt: selectAllTeachers és selectTeacherById, ahogyan az a leckében is látható.

A App.jsx-ben kapcsoljon be még egy gyermek útvonalat az oktatók oldalához.

A root.jsx fájlban a menüben a 'Teachers'-hez cserélje le a a tag-et NavLink-re, ahogyan az a leckében látható. Ügyeljen arra, hogy az aktív link a menüben valahogy kiemelkedjen, ehhez adjon hozzá stílusokat a index.css-be.