Redux-da satyjylaryň sanawy

Öňki sapaklarda biz esasy material bilen gutardyk. Indi thunk kömegi bilen serwerden önümleriň sanawyny alyp bileris we serwere täze önümi saklap bileris. Geliň, satyjylar bilen hem meşgullanıň. Elbetde, biz olar üçin hem maglumatlary alýarys. Geliň, satyjylaryň sanawy üçin aýratyn sahypa ýasaýaly.

Önümler bilen aplikasiýamyzy açalyň, we onda sellers bukjasyna girip. Bu bukjada SellersList.jsx faýlyny dörediň. Bu ýerde biz useSelector, Link we selectAllSellers-dan peýdalanyp, koduny biz soňra ýazjak bolan sellersSlice.js faýlynda ýazarys:

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

Soňra, özüni SellersList dörediň. Onda biz ähli satyjylary useSelector garmagy bilen alyp, soňra satyjylaryň sanawy üçin sazlanyşykly ýerleşişi map aýlawynda alyp, hem-de her bir satyjynyň ady öz sahypasyna ýol görkezer bolsun. We ahyrynda, atly we alnan sanaw bilen ýerleşişi yzyna gaýtaryň:

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>
	)
}

Soňra, sellersSlice.js faýlyna giriň we productsSlice.js faýlyndaky saýlawçylara meňzeş şekilde faýlyň ahyrynda, reducer eksport edilenden soň iki sany saýlawçy dörediň:

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

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

Indi biz sanawyň sahypasy üçin ýol belgini ýazmaly, onuň üçin App.jsx faýlyny açyň we çagalaryň ýollarynyň massiwine children ýene bir objekt goşuň (SellersList komponentini import etmekligi ýatdan çykarmaň):

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

Menýudaky 'Sellers' baglanyşygymyzyň işlemegi üçin, geliň, root.jsx faýlyna giriň (bu näçe wagt bolanda ... ) we a tegini NavLink elementine çalşyryň:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

We iň soňky. Menýumyzda aktiw baglanyşyk bellenip görkezilmegi we näçe sahypada ýerleşýändigimiz anyk bolmagy üçin, biz index.css faýlyna stili goşýarys:

nav a.active {
	color: purple;
}

Aplikasiýamyzy işledeliň. Indi biz menýudaky 'Sellers'-e basyp, satyjylaryň sahypasyna girip bileris. Elbetde, ilki bilen menýudaky 'Products'-e basmaly, ýogsa önümlerimiz ýüklenmez. Indiki sapakda her bir satyjynyň sahypasyny dörederis we bu Redux okuw gollanmasyny öwrenmek bilen tamamlaris.

Okuwçylaryňyz bilen aplikasiýaňyzy açyň. Sapagyň materiallaryny öwrenip, teachers bukjasyna giriň we TeachersList.jsx faýlyny dörediň. Bu komponent kömegi bilen siz okuw ussatlarynyň sanawyny görkezeris. Ona zerur komponentleri we garmaklary import ediň.

TeachersList komponenti üçin kody ýazyň, onda ähli okuw ussatlaryny alyň we okuw ussatlaryň sanawyny teachersToRender düzüň. Bu sanawyň her setirinde olaryň familiýalary we inisiallary görkezilsin, we möjeler içinde okadýan predmetleri görkezilsin. Her bir familiýa we inisiallar bilelikde baglanyşyk bolsun, bu baglanyşyk her bir okuw ussatynyň aýratyn sahypasyna ýol görkezsin. Soňra komponent kodyňyň ahyrynda at bilen we düzülen sanaw bilen ýerleşişi yzyna gaýtaryň.

teachersSlice.js faýlynyň ahyrynda sapakda görkezilen ýaly selectAllTeachers we selectTeacherById funksiýa-saýlawçylaryň jübütini dörediň.

App.jsx faýlynda okuw ussatlaryň sahypasy üçin ýene bir çaga ýol goşuň.

root.jsx faýlynda menýudaky 'Teachers' üçin a tegini NavLink bilen çalşyryň, sapakda görkezilen ýaly. Menýudaky aktiw baglanyşyk nähili bir belli görkezilsin, munuň üçin index.css faýlyna stilleri goşuň.