Adatok újrahasználata slice-ból Redux-ban

Az előző órán hozzáadtuk a termék hozzáadására szolgáló űrlaphoz egy további mezőt egy legördülő listával az eladó kiválasztásához, aki feltölti azt. Tegyük fel, most ezt az információt ki kell írnunk még néhány más helyen is az alkalmazásban. Ehhez nem fogjuk minden alkalommal megismételni a kódot, hanem egyszerűen létrehozunk egy külön komponenst, amely kinyeri az adatokat a slice-ból és kiírja azokat az alkalmazás azon részein, ahol szükségünk van rá.

Nyissuk meg a termék alkalmazásunkat. Most a products mappában hozzunk létre még egy SellerOfProd.jsx fájlt. Kezdetként importáljuk a useSelector hook-ot, amellyel megkapjuk a kívánt terméket tartalmazó slice-ot:

import { useSelector } from 'react-redux'

Ezután nyerjük ki a store-ból a szükséges eladót az eladó azonosítója alapján, amelyet átadunk az új komponensünknek a props-on keresztül:

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

És abban az esetben, ha van ilyen eladó, visszaadjuk a nevét, ha pedig nincs, akkor visszaadjuk a 'unknown' értéket:

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

Most importáljuk az új komponensünket a ProductsList.jsx fájlba és helyezzük el a ProductsList függvényben, közvetlenül a terméknévvel ellátott cím után. Amint látható, átadtuk neki az azonosítót a props-on keresztül:

<SellerOfProd sellerId={product.seller} />

Most, ha elindítjuk az alkalmazásunkat, hozzáadunk egy új terméket és megtaláljuk a listában, akkor látni fogjuk, hogy megjelent hozzá az eladó, míg az alkalmazás indításakor automatikusan hozzáadott termékeknél 'unknown' lesz.

Egy kis kitérő: ha az eslint a VS Code szerkesztőben panaszkodik a sellerId használatára, de az alkalmazás működik, akkor ignorálhatja egyelőre, vagy megnyithatja az alkalmazás .eslintrc.cjs fájlját és a rules részhez hozzáadhatja a "react/prop-types": "off" szabályt.

Magától értetődik, hogy szeretnénk hozzáadni az eladó adatait a termék oldalán is. Ehhez illesszük be a ProductPage komponens JSX-ében, a terméknévvel ellátott cím után ismét ezt a sort és ellenőrizzük, hogy minden működik:

<SellerOfProd sellerId={product.seller} />

Nyissa meg a diákokkal kapcsolatos alkalmazását. Miután tanulmányozta a lecke anyagát, a students mappában hozzon létre egy fájlt a TeacherForStudent komponens számára. Ennek eredményeképpen a komponensnek vissza kell adnia a tanár teljes nevét, mellette zárójelben pedig a tanított tárgyat. A szükséges tanárt keresse meg a useSelector hook segítségével. Ha a tanár az adott diákhoz hiányzik, jelenítse meg a 'anonym' értéket.

Az előző feladatban kapott komponens segítségével jelenítse meg a tanár adatait minden diákhoz a diákok listáját tartalmazó oldalon.

Ismételje meg azt, amit az előző feladatban tett, de most az egyes diákok oldalán.