Добавление дополнительной логики в 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;
}

Если это выглядит несколько запутанным, не переживайте, далее вам станет все намного понятнее.

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

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