Dodajanje dodatne logike v aplikacijo Redux

V tem poglavju bomo dodali zadnjo komponento k naši aplikaciji. Če smo natančni, bomo izdelku dodali odziv uporabnika, ki ga je bodisi naročil ali prebral informacije o njem.

Odprimo našo aplikacijo s produkti. Kot v primeru imena prodajalca, moramo pokazati odzive uporabnikov na več mestih v aplikaciji. Kar pomeni, da bomo potrebovali ločeno komponento. Zato začnimo tako, da v mapi products ustvarimo datoteko UserReactions.jsx. Za začetek vanjo vpišimo objekt, v katerem bodo naši odzivi:

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

Spodaj pa začnimo pisati samo funkcijo, v katero bomo podali slice product:

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

Zdaj v zavitih oklepajih napišimo telo funkcije UserReactions. Za to iterirajmo s pomočjo map pare ključ-vrednost našega reactionObj, za vsakogar pridobimo oznako za gumb ('+', '+/-' ali '-') in številčno vrednost določenega odziva (to bomo potegnili iz product v store po imenu odziva):

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

In po tem na koncu kode funkcije vrnimo HTML z gumbi userReactions:

return <div>{userReactions}</div>

Ter dodajmo še nekaj stilov v index.css:

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

Če se vam to zdi nekoliko zapleteno, ne skrbite, kasneje vam bo postalo veliko bolj razumljivo.

Odprite vašo aplikacijo s študenti. V vaši aplikaciji bo možnost za uporabnike, da med študenti izberejo vodjo skupine in kapetana športne ekipe. Zato, ko preučite gradivo lekcije, ustvarite v mapi students datoteko UserVotes.jsx. Na začetku datoteke ustvarite objekt votesObj, v katerem boste imeli dve lastnosti - leader in captain, z vrednostmi GL in TC, kot oznako za gumbe.

Spodaj v datoteki po definiciji objekta votesObj napišite kodo funkcije UserVotes, po analogiji z gradivom iz te lekcije.