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

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

Давайте откроем наше приложение с продуктами. Как и в случае с названием продавца, нам нужно показать реакцию пользователей в нескольких местах приложения. А это значит, что нам потребуется отдельный компонент. Поэтому начнем с того, что в папке products создадим файл UserReactions.jsx. Давайте для начала пропишем в нем объект, в котором будут наши реакции:

products/UserReactions.jsxconst reactionObj = {
  good: '+',
  soso: '+/-',
  bad: '-',
}

А ниже начнем писать саму функцию, в которую будем передавать слайс product:

products/UserReactions.jsxexport const UserReactions = ({ product }) => {}

Теперь в фигурных скобках напишем тело функции UserReactions. Для этого переберем с помощью map пары ключ-значение нашего reactionObj, для каждой получим обозначение для кнопки ('+', '+/-' или '-') и численное значение той или иной реакции (его мы будем вытягивать из product в store по названию реакции):

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

И после этого в конце кода функции вернем верстку с кнопками userReactions:

products/UserReactions.jsxreturn <div>{userReactions}</div>

А также добавим еще немного стилей в index.css:

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

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