Листа на продавачи во 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. Во него ќе ги добиеме сите продавачи со помош на hook-от 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 да создадеме на самиот крај на датотеката два селектори по извозот на reducer-от:

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. Со помош на овој компонент ќе прикажувате листа на наставници. Импортирајте во него потребните компоненти и hook-ови.

Напишете код за компонентот TeachersList, добијте ги во него сите наставници и направете листа на наставници teachersToRender, нека во секој ред од оваа листа се прикажуваат нивните презимиња и иницијали, а во загради предметот кој го предаваат. Нека секои име и презиме заедно биде врска, која води до посебна страница за секој наставник. Потоа на крајот од кодот на компонентата вратете верстка со наслов и создадената листа.

На крајот на датотеката teachersSlice.js создадете пар функции-селектори selectAllTeachers и selectTeacherById, како што е прикажано во лекцијата.

Во App.jsx поврзете уште една детска патека за страницата со наставници.

Во датотеката root.jsx во менито за 'Teachers' заменете го тагот a со NavLink, како што е прикажано во лекцијата. Направете активната врска во менито да се истакнува на некој начин, додавајќи за тоа стилови во index.css.