Дадаванне дадатковай логікі ў Redux прыкладанне

На гэтым заняцці мы дадамо апошні компанент да нашага прыкладання. Калі быць канкрэтным, то мы будзем дадаваць да прадукту рэакцыю карыстальніка, які яго альбо заказваў, альбо прачытаў пра яго інфармацыю.

Давайце адчынем наша прыкладанне з прадуктамі. Як і ў выпадку з назвай прадаўца, нам трэба паказаць рэакцыю карыстальнікаў у некалькіх месцах прыкладання. А гэта значыць, што нам спатрэбіцца асобны кампане́нт. Таму пачнем з таго, што ў тэчцы products створым файл UserReactions.jsx. Давайце для пачатку пропішам у ім аб'ект, у якім будуць нашы рэакцыі:

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

А ніжэй пачнем пісаць самую функцыю, у якую будзем перадаваць слайс product:

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

Цяпер у фігурных дужках напішам цела функцыі UserReactions. Для гэтага перабярэм з дапамогай map пары ключ-значэнне нашага reactionObj, для кожнай атрымаем абазначэнне для кнопкі ('+', '+/-' ці '-') і лікавае значэнне той ці іншай рэакцыі (яго мы будзем выцягваць з 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;
}

Калі гэта выглядае некалькі заблытаным, не перажывайце, далей вам стане ўсё нашмат зразумелей.

Адчынiце ваша прыкладанне са студэнтамі. У вашым прыкладанні будзе магчымасць для карыстальнікаў выбраць сярод студэнтаў старосту групы і капітана спартовай каманды. Таму, вывучыўшы матэрыялы ўроку, стварыце ў тэчцы students файл UserVotes.jsx. У пачатку файла стварыце аб'ект votesObj, у якім у вас будзе дзве ўласцівасці - leader і captain, са значэннямі GL і TC, у якасці абазначэння для кнопак.

Ніжэй у файле пасля вызначэння аб'екта votesObj напішыце код функцыі UserVotes, па аналогіі з матэрыялам з дадзенага ўроку.