Додавање додатне логике у Redux апликацију

На овом часу ћемо додати последњи компонент нашој апликацији. Тачније, додаћемо продукту реакцију корисника који га је наручио или прочитао информације о њему.

Отворимо нашу апликацију са производима. Као и са именом продавца, морамо приказати реакције корисника на неколико места у апликацији. То значи да ће нам требати посебан компонент. Зато почнимо тако што у фасцикли products креирамо фајл UserReactions.jsx. Прво ћемо у њему дефинисати објекат који ће садржати наше реакције:

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

Испод ћемо почети са писањем саме функције, којој ћемо проследити слајс product:

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

Сада у витичастим заградама напишимо тело функције UserReactions. За ово ћемо проћи кроз парове кључ-вредност нашег reactionObj користећи map, за сваки добити ознаку за дугме ('+', '+/-' или '-') и нумеричку вредност одређене реакције (извући ћемо је из product у store-у по називу реакције):

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

И након тога на крају кода функције вратимо размету са дугмадима userReactions:

return <div>{userReactions}</div>

Такође додајмо још мало стилова у index.css:

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

Ако ово изгледа помало збуњујуће, не брините, ускоро ће вам све бити много јасније.

Отворите вашу апликацију са студентима. У вашој апликацији постојаће могућност за кориснике да одаберу међу студентима старосту групе и капитена спортског тима. Дакле, проучивши материјал лекције, креирајте у фасцикли students фајл UserVotes.jsx. На почетку фајла креирајте објекат votesObj, у коме ћете имати два својства - leader и captain, са вредностима GL и TC, као ознаку за дугмад.

Испод у фајлу, након дефинисања објекта votesObj, напишите код функције UserVotes, по аналогији са материјалом из ове лекције.