További logika hozzáadása a Redux alkalmazáshoz

Ezen az órán adjuk hozzá az utolsó komponenst az alkalmazásunkhoz. Hogy pontosak legyünk, a termékhez hozzáadjuk a felhasználó reakcióját, aki vagy megrendelte, vagy információt olvasott róla.

Nyissuk meg a termékalkalmazásunkat. Ahogyan az eladó nevével is történt, szükségünk van a felhasználók reakciójának megjelenítésére az alkalmazás több helyén is. Ez azt jelenti, hogy külön komponensre lesz szükségünk. Ezért kezdjük azzal, hogy a products mappában létrehozunk egy UserReactions.jsx fájlt. Kezdjük azzal, hogy definiálunk benne egy objektumot, amelyben a reakcióink lesznek:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

Alább kezdjük el magának a függvénynek az írását, amibe átadjuk a product slice-ot:

export const UserReactions = ({ product }) => {}

Most írjuk be a kapcsos zárójelek közé a UserReactions függvény törzsét. Ehhez iteráljunk végig a reactionObj kulcs-érték párijain a map segítségével, minden egyes párhoz kapjunk egy gombjelölést ('+', '+/-' vagy '-') és az adott reakció számértékét (ezt a product store-ból fogjuk kinyerni a reakció neve alapján):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

Majd ezután a függvény kódjának a végén adjuk vissza a userReactions gombokkal ellátott JSX-et:

return <div>{userReactions}</div>

És adjunk hozzá még néhány stílust a index.css fájlhoz:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

Ha ez kissé bonyolultnak tűnik, ne aggódj, később sokkal világosabb lesz számodra.

Nyisd meg a diákalkalmazásodat. Az alkalmazásodban lesz lehetőség a felhasználók számára, hogy kiválasszák a diákok közül a csoport vezetőjét és a sportcsapat kapitányát. Ezért a lecke anyagának tanulmányozása után hozdd létre a students mappában a UserVotes.jsx fájlt. A fájl elején hozz létre egy votesObj objektumot, amelyben két tulajdonság lesz - leader és captain, a következő értékekkel: GL és TC, mint gombjelölések.

Alább a fájlban, a votesObj objektum megadása után írd be a UserVotes függvény kódját, az e lecke anyagához hasonlóan.