Lisaloogika lisamine Redux rakendusse

Sellel tunniplokil lisame oma rakendusele viimase komponendi. Täpsemalt lisame tootele kasutaja reaktsiooni, kas kasutaja on selle tellinud või lugenud selle kohta infot.

Avame oma tooterakenduse. Nagu müüja nime puhul, peame kasutajate reaktsioone näitama mitu kohta rakenduses. See tähendab, et vajame eraldi komponenti. Seega alustame sellest, et kaustas products loome faili UserReactions.jsx. Alustuseks kirjutame sinna objekti, milles on meie reaktsioonid:

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

Ja allpool hakkame kirjutama funktsiooni ennast, millele anname edasi lõigu product:

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

Nüüd kirjutame looksulgudesse funktsiooni UserReactions keha. Selleks loome kasutades map meie reactionObj võtme-väärtus paarid, igaühe jaoks saame nupu tähise ('+', '+/-' või '-') ja arvulise reaktsiooni väärtuse (saa me võtame selle product-st store'ist reaktsiooni nime järgi):

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

Ja pärast seda tagastame funktsiooni lõpus nuputempli nuppudega userReactions:

return <div>{userReactions}</div>

Ja lisaks lisame veel natuke stiile faili index.css:

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

Kui see tundub segadust tekitav, ärge muretsege, edasi saab kõik palju selgemaks.

Avage oma õpilaste rakendus. Teie rakenduses on võimalus kasutajatel valida õpilaste seast grupi vanem ja spordimeeskonna kapten. Seega, pärast tunni materjalide läbimist, looge kaustas students fail UserVotes.jsx. Faili alguses looge objekt votesObj, milles on kaks omadust - leader ja captain, koos väärtustega GL ja TC, kui tähised nuppude jaoks.

Allpool failis pärast objekti votesObj määratlemist kirjutage funktsiooni UserVotes kood, analoogiliselt materjaliga sellest tunnist.