Lisälogiikan lisääminen Redux-sovellukseen

Tällä oppitunnilla lisäämme viimeisen komponentin sovellukseemme. Tarkemmin sanottuna lisäämme tuotteelle käyttäjän reaktion, joko tilannut tai lukenut siitä tietoa.

Avataan tuotesovelluksemme. Kuten myyjän nimen kohdalla, meidän tulee näyttää käyttäjien reaktiot useassa kohdassa sovellusta. Tämä tarkoittaa, että tarvitsemme erillisen komponentin. Siksi aloitamme luomalla kansioon products tiedoston UserReactions.jsx. Aluksi määritellään siihen objekti, joka sisältää reaktionsa:

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

Ja alapuolelle alamme kirjoittaa itse funktion, johon välitämme slicen product:

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

Nyt aaltosulkeisiin kirjoitamme funktion UserReactions rungon. Tätä varten käymme läpi map:lla reactionObj:mme avain-arvo-parit, saamme kullekin painikkeen merkinnän ('+', '+/-' tai '-') ja numeerisen arvon tietylle reaktiolle (sen vedämme product:sta storeen reaktion nimen perusteella):

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

Ja tämän jälkeen funktion koodin lopussa palautamme renderöinnin painikkeilla userReactions:

return <div>{userReactions}</div>

Ja lisäämme myös hieman tyylejä tiedostoon index.css:

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

Jos tämä vaikuttaa hieman sekavalta, älä huoli, myöhemmin kaikki selkiytyy paljon.

Avaa opiskelijasovelluksesi. Sovelluksessasi on mahdollisuus käyttäjille valita opiskelijoiden joukosta ryhmän vanhin ja urheilujoukkueen kapteeni. Siksi, tutkittuasi oppitunnin materiaalit, luo kansioon students tiedosto UserVotes.jsx. Tiedoston alussa luo objekti votesObj, jossa on kaksi ominaisuutta - leader ja captain, arvoina GL ja TC, merkintöinä painikkeille.

Alempana tiedostossa objektin votesObj määrittelyn jälkeen kirjoita funktion UserVotes koodi, analogisesti materiaalin kanssa tästä oppitunnista.