Վաճառողների ցուցակ 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-ում համապատասխան ոճեր։