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