Страница продавца в Redux
Дело осталось за малым. Давайте на данном занятии сделаем последнюю вещь - добавим в наше приложение отдельную страничку для каждого продавца. Здесь будут только уже знакомые вам действия. Приступим.
Откроем наше приложение с продуктами, а в
нем папку sellers. Создадим в этой папке
файл SellerPage.jsx. Теперь начнем
писать код SellerPage для нашего
компонента:
export const SellerPage = () => {}
Для начала получим id продавца и по нему найдем объект нужного продавца в слайсе:
export const SellerPage = () => {
let params = useParams()
const { sellerId } = params
const seller = useSelector((state) => selectSellerById(state, sellerId))
}
Далее ниже в коде для SellerPage после
получения продавца мы получим все продукты, а затем
выберем из них только те, которые выложены
данным продавцом:
const productsOfSeller = useSelector((state) => {
const allProducts = selectAllProducts(state)
return allProducts.filter((product) => product.seller === sellerId)
})
А далее из названий выбранных продуктов
сформируем список при помощи map. Причем
каждое название продукта в этом списке
будет ссылкой на страничку этого продукта:
const productNames = productsOfSeller.map((product) => (
<li key={product.id}>
<Link to={`/products/${product.id}`}>{product.name}</Link>
</li>
))
И в конце кода для SellerPage вернем
верстку: заголовок с названием продавца
и список продуктов, которые выложил этот
продавец:
return (
<div>
<h2>Seller: {seller.name}</h2>
<ul>{productNames}</ul>
</div>
)
Конечно же нам еще нужен маршрут
для странички продавца. Откроем
файл App.jsx и добавим его
последним к дочерним маршрутам:
{
path: '/sellers/:sellerId',
element: <SellerPage />,
},
Не забудьте импортировать необходимые
хуки и компоненты в SellersPage.jsx и
App.jsx.
Запустим наше приложение, подгрузим продукты,
а затем в менюшке слева кликнем по ссылке
'Sellers'. Теперь мы можем
зайти на страничку любого продавца, кликнув
по его названию, а затем на его страничке
увидеть все его продукты. А, кликнув по любому
из его продуктов, зайдем на страничку с этим
продуктом.
На этом пока все. Мы изучили основы Redux для создания приложения и даже немного глубже. Познакомились с различными полезными инструментами. Желаю вам удачи в создании ваших Redux-приложений!
Откройте ваше приложение со студентами.
Изучив материалы урока, в папке teachers
создайте файл TeacherPage.jsx. В коде
компонента TeacherPage получите объект
с нужным учителем и всех студентов данного
преподавателя. При помощи map создайте из
них список, пусть ФИО каждого студента будет
ссылкой на страничку этого студента.
Пусть в возвращаемой верстке у вас будет заголовок с ФИО преподавателя, ниже будет заголовок поменьше - с предметом, который он ведет, а еще ниже список его студентов.
В App.jsx подключите еще один дочерний
маршрут для странички с преподавателем.
Запустите ваше приложение и убедитесь, что все работает.