Спіс прадаўцоў у 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.