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

← →
↑