Andmete taaskasutamine Reduxi lõigust

Eelmisel tunnil lisasime toote lisamise vormile veel ühe välja rippmenüüga müüja valimiseks, kes selle postitab. Oletame, nüüd peame seda teavet kuvama veel mitmes rakenduse kohas. Selleks me ei korda iga kord koodi, vaid loome lihtsalt eraldi komponendi, milles hakkame andmeid lõigust hankima ja kuvama neis rakenduse osades, kus meil vaja on.

Avame oma tooterakenduse. Loome nüüd kaustas products veel faili SellerOfProd.jsx. Alustuseks impordime konksu useSelector, mille abil saame vajaliku tootega lõigu:

import { useSelector } from 'react-redux'

Seejärel hankigem store'ist vajaliku toote müüja id järgi, mille me edastame oma uuele komponendile propsidena:

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

Ja juhul, kui selline müüja on olemas, tagastame tema nime, aga kui mitte, siis tagastame 'unknown':

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

Importigem nüüd oma uue komponendi faili ProductsList.jsx ja paneme selle funktsiooni ProductsList kohe peale tootenime pealkirja. Nagu näete, andsime me talle propsidena id:

<SellerOfProd sellerId={product.seller} />

Nüüd, kui käivitame oma rakenduse, lisame uue toote ja leiame selle nimekirjast, siis näeme, et sellel on müüja, kuid automaatselt rakenduse käivitamisel lisatud toodetel on 'unknown'.

Väike kõrvalepõige: kui teie eslint VS Code'i redaktoris viriseb sellerId peale, kuid rakendus töötab, siis võite seda praegu ignoreerida või avada oma rakenduse faili .eslintrc.cjs ja rules alla lisada "react/prop-types": "off".

Iseenesestmõistetavalt sooviksime me müüja teavet lisada ka toote lehele. Selleks paneme veeristuses ProductPage peale toote nime pealkirja uuesti selle rea ja kontrollime, et kõik töötab:

<SellerOfProd sellerId={product.seller} />

Avage oma õpilaste rakendus. Pärast tunni materjali läbimist looge kaustas students fail komponendile TeacherForStudent. Tulemusena peaks komponent tagastama õpetaja ees- ja perekonnanime ning koolituse, mida ta õpetab. Vajaliku õpetaja leidke konksu useSelector abil. Kui õpetajat sellele õpilasele ei leidu, kuvage 'anonym'.

Kasutades eelmises ülesandes saadud komponenti, kuvage iga õpilase õpetaja andmed õpilaste nimekirja lehel.

Tehke sama, mis eelmises ülesandes, kuid üksiku õpilase lehe jaoks.