Добавление дополнительной логики в 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, по аналогии с материалом
из данного урока.