Добавяне на допълнителна логика в Redux приложение

В този урок ще добавим последния компонент към нашето приложение. По-конкретно, ще добавим към продукта реакция на потребителя, който го е поръчал или е прочел информация за него.

Нека отворим нашето приложение с продукти. Както в случая с името на продавача, ние трябва да покажем реакцията на потребителите на няколко места в приложението. А това означава, че ще ни трябва отделен компонент. Затова нека започнем, като в папката products създадем файл UserReactions.jsx. Нека първоначално да напишем в него обект, който ще съдържа нашите реакции:

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

А по-надолу нека започнем да пишем самата функция, в която ще предаваме slice-а 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;
}

Ако това изглежда малко объркващо, не се притеснявайте, по-нататък всичко ще ви стане много по-ясно.

Отворете вашето приложение със студенти. В вашето приложение ще има възможност за потребителите да изберат сред студентите староста на групата и капитана на спортния отбор. Затова, след като изучите материала от урока, създайте в папката students файл UserVotes.jsx. В началото на файла създайте обект votesObj, в който ще имате две свойства - leader и captain, със стойности GL и TC, като обозначение за бутоните.

По-долу във файла след дефинирането на обекта votesObj напишете кода на функцията UserVotes, по аналогия с материала от този урок.