Pardavėjų sąrašas Redux

Ankstesnėse pamokose mes baigėme pagrindinę medžiagą. Dabar naudodami thunk mes gauname produktų sąrašą iš serverio ir galime išsaugoti naują produktą serveryje. Panagrinėkime pardavėjus. Juk mes gauname duomenis ir jiems. Sukurkime atskirį puslapį su pardavėjų sąrašu.

Atidarykime mūsų programą su produktais, o joje aplanką sellers. Sukurkime šiame aplanke failą SellersList.jsx. Čia mes naudosime useSelector, Link ir selectAllSellers, kurio kodą mes parašysime sellersSlice.js vėliau:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Tada sukursime patį SellersList. Jame mes gausime visus pardavėjus naudodami hook'ą useSelector, tada gausime sąrašo pardavėjų išdėstymą cikle map, be to, kiekvienas pardavėjo pavadinimas bus nuoroda į jo puslapį. Ir pabaigoje grąžinsime išdėstymą su antrašte ir gautu sąrašu:

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>Pardavėjai:</h2>

			<ul>{sellersToRender}</ul>
		</div>
	)
}

Tada nueisime į failą sellersSlice.js ir pagal analogiją su selektoriais productsSlice.js sukursime pačioje failo pabaigoje du selektorius po reduktoriaus eksporto:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Dabar mums reikia nurodyti maršrutą pushapiui su sąrašu, tam atidarykime failą App.jsx ir į vaikų maršrutų masyvą children pridėkime dar vieną objektą (nepamirškite importuoti komponento SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

Kad mūsų nuoroda 'Pardavėjai' meniu veiktų, eikime į failą root.jsx (kaip seniai tai buvo ... ) ir pakeiskime tag'ą a į elementą NavLink:

<NavLink to="/sellers" end>
	Pardavėjai
</NavLink>

Ir paskutinis. Kad mūsų meniu paryškintų aktyvią nuorodą, ir būtų aišku kuriame puslapyje mes esame, mes pridėsime stilių index.css:

nav a.active {
	color: purple;
}

Paleiskime mūsų programą. Dabar mes galime ateiti į puslapį su pardavėjais, paspaudę 'Pardavėjai' meniu. Žinoma, pirmiausia reikia paspausti 'Produktai' meniu, kitaip mūsų produktai nebus užkrauti. Kitoje pamokoje mes sukursime puslapį kiekvienam pardavėjui ir tuo baigsime šios mokymo programos apie Redux studijas.

Atidarykite savo studentų programą. Išstudijavę pamokos medžiagą, aplanke teachers sukurkite failą TeachersList.jsx. Naudodami šį komponentą jūs atvaizduosite dėstytojų sąrašą. Importuokite į jį reikalingus komponentus ir hook'us.

Parašykite kodą komponentui TeachersList, gaukite jame visus dėstytojus ir sukurkite dėstytojų sąrašą teachersToRender, tegu kiekvienoje šio sąrašo eilutėje rodomi jų pavardės ir inicialai, o skliausteliuose dalykas, kurį jie dėsto. Tegul kiekvieni VPI kartu būna nuoroda, vedanti į atskirą pushapį kiekvienam dėstytojui. Tada komponento kodo pabaigoje grąžinkite išdėstymą su antrašte ir sukurtu sąrašu.

Failo teachersSlice.js pabaigoje sukurkite porą funkcijų-selektorius selectAllTeachers ir selectTeacherById, kaip parodyta pamokoje.

App.jsx prijunkite dar vieną vaiko maršrutą pushapiui su dėstytojais.

Faile root.jsx meniu 'Dėstytojai' pakeiskite tag'ą a į NavLink, kaip parodyta pamokoje. Padarykite taip, kad aktyvi nuoroda meniu kažkaip išsiskirtų, pridėdami tam stilius index.css.