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>Сатушылар:</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 />,
},

Мәзірдегі 'Сатушылар' сілтемесі жұмыс істеуі үшін, root.jsx файлына кірейік (бұл қанша уақыт бұрын болған еді ... ) және a тегін NavLink элементіне ауыстырайық:

<NavLink to="/sellers" end>
	Сатушылар
</NavLink>

Және соңғысы. Біздің мәзірде белсенді сілтеме бөлініп тұруы үшін, және біз қай бетте екеніміз түсінікті болуы үшін, біз index.css файлына стиль қосамыз:

nav a.active {
	color: purple;
}

Қолданбамызды іске қосамыз. Енді біз мәзірдегі 'Сатушылар' басып, сатушылар бетіне кізе аламыз. Әрине, алдымен мәзірдегі 'Өнімдер' басу керек, әйтпесе біздің өнімдер жүктелмейді. Келесі сабақта біз әрбір сатушы үшін жеке бет жасаймыз және осы Redux оқулығын оқуды аяқтаймыз.

Студенттер қолданбасын ашыңыз. Сабақ материалын зерттеп, teachers бумасында TeachersList.jsx файлын жасаңыз. Осы компоненттің көмегімен сіз оқытушылар тізімін шығарасыз. Оған қажетті компоненттер мен хукаларды импорттаңыз.

TeachersList компоненті үшін код жазыңыз, онда барлық оқытушыларды алып, оқытушылар тізімін teachersToRender жасаңыз, осы тізімнің әрбір жолында олардың тегі және бас әріптері, ал жақшада олардың өтілетін пәні көрсетілсін. Әрбір АЖ-нің өзі әрбір оқытушының жеке бетіне апаратын сілтеме болсын. Содан кейін компонент кодының соңында тақырып жолы мен жасалған тізімнің версткасын қайтарыңыз.

teachersSlice.js файлының соңында selectAllTeachers және selectTeacherById функция-селекторлар жұбын жасаңыз, сабақта көрсетілгендей.

App.jsx файлында оқытушылар бетіне тағы бір бала маршрутты қосыңыз.

root.jsx файлында мәзірдегі 'Оқытушылар' үшін a тегін NavLink-ке ауыстырыңыз, сабақта көрсетілгендей. Белсенді сілтеме мәзірде бөлініп тұруы үшін, оған index.css файлына стильдерді қосыңыз.