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

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

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

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

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

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