Списък на продавачи в Redux

В предишните занятия ние приключихме с основния материал. Сега с помощта на thunk получаваме списък с продукти от сървъра и можем да запазим нов продукт на сървъра. Нека се занимаем с продавачите. В крайна сметка получаваме данни и за тях. Нека направим отделна страница със списък на продавачите.

Нека отворим нашето приложение с продукти, а в него папката sellers. Нека създадем в тази папка файл SellersList.jsx. Тук ще използваме useSelector, Link и selectAllSellers, чийто код ние ще напишем в sellersSlice.js малко по-късно:

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

След това нека създадем самия SellersList. В него ние ще получим всички продавачи с помощта на кука useSelector, след това ще получим верстката за списъка на продавачите в цикъл map, като всяко име на продавач ще води към неговата страница. И накрая ще върнем верстката със заглавие и получения списък:

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

След това нека отидем във файла sellersSlice.js и по аналогия с селекторите в productsSlice.js създадем в самия край на файла два селектора след експорта на редуктора:

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

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

Сега трябва да напишем маршрута за страницата със списъка, за това нека отворим файла App.jsx и в масива от дъщерни маршрути children да добавим още един обект (не забравяйте да импортирате компонента SellersList):

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

За да заработи нашата връзка 'Sellers' в менюто, нека влезем във файла root.jsx (как отдавна беше това ... ) и заменим тага a с елемент NavLink:

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

И последно. За да се подчертае активната връзка в нашето меню и да е ясно на коя страница се намираме, ще добавим стил в index.css:

nav a.active {
	color: purple;
}

Нека стартираме нашето приложение. Сега можем да влезем на страницата с продавачи, като кликнем върху 'Sellers' в менюто. Преди това, разбира се, трябва да кликнем върху 'Products' в менюто, иначе нашите продукти няма да се заредят. В следващия урок ще направим страница за всеки продавач и с това ще приключим изучаването на този учебник за Redux.

Отворете вашето приложение със студенти. След като изучихте материала от урока, в папката teachers създайте файл TeachersList.jsx. С помощта на този компонент ще извеждате списък на преподавателите. Импортирайте в него необходимите компоненти и куки.

Напишете код за компонента TeachersList, вземете в него всички преподаватели и направете списък с преподаватели teachersToRender, нека във всеки ред от този списък се показват техните фамилни имена и инициали, а в скоби предмета, който водят. Нека всяко име заедно да е връзка, която води към отделна страница за всеки преподавател. След това в края на кода на компонента върнете верстката със заглавие и създадения списък.

В края на файла teachersSlice.js създайте двойка функции-селектори selectAllTeachers и selectTeacherById, както е показано в урока.

В App.jsx свържете още един дъщерен маршрут за страницата с преподаватели.

Във файла root.jsx в менюто за 'Teachers' заменете тага a с NavLink, както е показано в урока. Направете така, че активната връзка в менюто да се подчертае по някакъв начин, като добавите за това стилове в index.css.