Papildomos logikos pridėjimas prie Redux programėlės

Šioje pamokoje mes pridėsime paskutinį komponentą prie mūsų programėlės. Jei kalbėti konkretžiau, tai mes pridėsime prie produkto vartotojo reakciją, kuris jį arba užsakė, arba apie jį perskaitė informaciją.

Atidarykime mūsų produktų programėlę. Kaip ir pardavėjo pavadinimo atveju, mums reikia parodyti vartotojų reakcijas kelioje programėlės vietose. O tai reiškia, kad mums prireiks atskiro komponento. Todėl pradėkime nuo to, kad products aplanke sukursime failą UserReactions.jsx. Pirmiausia įrašykime į jį objektą, kuriame bus mūsų reakcijos:

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

Žemiau pradėkime rašyti pačią funkciją, į kurią perduosime slice'ą product:

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

Dabar garbanotose skliaustuose parašykime funkcijos UserReactions kūną. Tam peržiūrėkime naudodami map mūsų reactionObj raktų-reikšmių poras, kiekvienai gausime pavadinimą mygtukui ('+', '+/-' ar '-') ir skaitinę tos ar kitos reakcijos reikšmę (ją mes imsime iš product saugykloje pagal reakcijos pavadinimą):

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

Ir po to funkcijos kodo pabaigoje grąžinkime išdėstymą su mygtukais userReactions:

return <div>{userReactions}</div>

Taip pat pridėkime dar šiek tiek stilių į index.css:

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

Jei tai atrodo šiek tiek painu, nesijaudinkite, vėliau jums viskas taps daug aiškiau.

Atidarykite savo studentų programėlę. Jūsų programėlėje bus galimybė vartotojams pasirinkti tarp studentų grupės seniūną ir sportinės komandos kapitoną. Todėl, išstudijavę pamokos medžiagą, sukurkite students aplanke failą UserVotes.jsx. Failo pradžioje sukurkite objektą votesObj, kuriame jūs turėsite dvi savybes - leader ir captain, su reikšmėmis GL ir TC, kaip pavadinimą mygtukams.

Žemiau faile po objekto votesObj apibrėžimo parašykite funkcijos UserVotes kodą, analogiškai su medžiaga iš šios pamokos.