Страница на продавач во 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.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 поврзете уште една детска рута за страницата со предавач.

Стартувајте ја вашата апликација и проверете, дека сè работи.