Redux-daky kesimden maglumatlary köp gezek ulanmak

Öňki sapakda biz önüm goşmak üçin forma ýerine ýene bir meýdançany satjy saýlamak üçin açylýan sanaw bilen goşduk, ony ýerleşdirýär. Guman edeliň, indi bu maglumatlary programmaň ýene birnäçe ýerinde görkezmeli bolarys. Bu üçin her gezek kody gaýtalamaly bolmaz, ýöne aýratyn komponent dörederis, onda kesimden maglumatlary alyp, programmaň nirededir görkezmeli bolan böleklerinde görkezeris.

Önümler bilen programmany açaýly. Indi products papkasynyň içinde ýene bir faýl SellerOfProd.jsx döredeliň. Başlangyç üçin useSelector çekesini import edeliň, onuň ýardamy bilen gerekli önüm bilen kesimi aýrarys:

import { useSelector } from 'react-redux'

Soňra store-dan gerekli önümi satjynyň id-si boýunça aýralyň, biz täze komponentimize props üsti bilen geçireris:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

Eger şeýle satjy bar bolsa, biz onuň adyny yzyna gaýtarys, ýok bolsa, 'unknown' gaýtarys:

return <span>by {seller ? seller.name : 'unknown'}</span>

Indi täze komponentimizi ProductsList.jsx-a import edeliň we goşalyň onuň ProductsList funksiýasynda önümiň adyny görkezýän atlandyryjydan soň. Görşüňiz ýaly, biz oňa props üsti bilen id geçirdik:

<SellerOfProd sellerId={product.seller} />

Indi, eger programmany işledip, täze önüm goşup we ony sanawda tapsak, onuň satjysy bardygyny göreris, programma işledilende awtomatiki goşulan önümlerde bolsa 'unknown' bolar.

Kiçiräk çykgyt: eger VS Code redaktoryňyzdaky eslint sellerId-a ýazgy edýän bolsa, programma işleýän bolsa, onda häzirki wagt üçin ony etmezlik edip bilersiňiz ýa-da programmanyň .eslintrc.cjs faýlyny açyň we rules-a "react/prop-types": "off" goşuň.

Öz-özünden düşünilýär, biz satjy barada maglumatlary goşmak isleýäris önüm sahypasynda. Bu üçin goşalyň ProductPage görnüşinde önümiň adyny görkezýän atlandyryjydan soň bu setiri ýene-de we işleýändigini barlaň:

<SellerOfProd sellerId={product.seller} />

Studentler bilen programmanyňyzy açyň. Sapak materyalyny öwrenenden soň, students papkasynyň içinde TeacherForStudent komponenti üçin faýl dörediň. Netijede komponent mugallymyň A.A.A-syny yzyna gaýtarmaly, we gapdaldaky möýjünde onuň okadýan predmeti. Gerekli mugallymy tapmak üçin çek useSelector-y ulan. Eger şu student üçin mugallym ýok bolsa, 'anonym' görkeziň.

Öňki meseleden alynan komponenti ulanmak bilen her bir student üçin mugallym barada maglumatlary studentleriň sanawy bar bolan sahypada görkeziň.

Öňki meselede edilýän zatlary ediň, ýöne aýratyn student sahypasy üçin.