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