Список продавцов в 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.