Страница на продавача в 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 свържете още един дъщерен маршрут за страницата с преподавателя.

Стартирайте вашето приложение и се уверете, че всичко работи.