Hergebruik van data uit 'n slice in Redux

In die vorige les het ons by die vorm vir die byvoeging van 'n produk nog 'n veld bygevoeg met 'n aftreklys om die verkoper te kies wat dit lys. Kom ons neem nou aan ons moet hierdie inligting ook in verskeie ander plekke in die toepassing uitvoer. Vir hierdie doel sal ons nie die kode elke keer herhaal nie, maar eerder 'n aparte komponent skep, waaruit ons die data uit die slice sal haal en dit uitvoer in die dele van die toepassing waar ons dit nodig het.

Laat ons ons produktoepassing oopmaak. Kom ons skep nou in die gids products 'n lêer SellerOfProd.jsx. Om mee te begin voer ons die hoek useSelector in, waarmee ons die slice met die nodige produk sal verkry:

import { useSelector } from 'react-redux'

Trek dan uit die store die nodige produk volgens die verkoper se id, wat ons aan ons nuwe komponent in die props sal oordra:

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

En as daar so 'n verkoper is, sal ons sy naam teruggee, en indien nie, sal ons 'unknown' teruggee:

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

Laat ons nou ons nuwe komponent in ProductsList.jsx invoer en dit in die funksie ProductsList plaas, direk na die opskrif met die produknaam. Soos jy kan sien, het ons die id in die props aan hom oorgedra:

<SellerOfProd sellerId={product.seller} />

Nou, as ons ons toepassing begin, 'n nuwe produk byvoeg en dit in die lys vind, dan sal ons sien dat dit 'n verkoper het, en by die produkte wat outomaties bygevoeg is tydens die opstart van die toepassing, sal daar 'unknown' wees.

'n Klein afwyking: as jou eslint in die VS Code-redigeerder kla oor sellerId, maar die toepassing werk, kan jy dit vir nou ignoreer of die lêer .eslintrc.cjs van jou toepassing oopmaak en in rules byvoeg "react/prop-types": "off".

Dit spreek vanself dat ons die inligting oor die verkoper ook op die produkbladsy wou byvoeg. Om dit te doen, plaas ons in die opmaak van ProductPage na die opskrif met die produknaam weer hierdie reël en gaan na of alles werk:

<SellerOfProd sellerId={product.seller} />

Maak jou studentetoepassing oop. Nadat jy die lesse se materiaal bestudeer het, skep jy in die gids students 'n lêer vir die komponent TeacherForStudent. Uiteindelik moet die komponent die onderwyser se volle naam teruggee, en tussen hakies die vak wat hy/sy doseer. Vind die nodige onderwyser deur die hoek useSelector te gebruik. As daar nie 'n onderwyser vir die gegewe student is nie, voer 'anonym' uit.

Gebruik die verkrygde komponent uit die vorige taak om die data van die onderwyser vir elke student op die bladsy met die studentelys uit te voer.

Doen dieselfde as in die vorige taak, maar vir die afsonderlike bladsy van die student.