Redux Uygulamasına Ek Mantık Ekleme

Bu derste uygulamamıza son bileşeni ekleyeceğiz. Daha spesifik olmak gerekirse, ürüne, onu sipariş veren veya hakkında bilgi okuyan kullanıcının tepkisini ekleyeceğiz.

Ürün uygulamamızı açalım. Satıcı adında olduğu gibi, kullanıcı tepkilerini uygulamanın birkaç yerinde göstermemiz gerekiyor. Bu da demek oluyor ki ayrı bir bileşene ihtiyacımız olacak. Bu nedenle products klasöründe UserReactions.jsx dosyasını oluşturarak başlayalım. Öncelikle içinde tepkilerimizin bulunacağı bir nesne tanımlayalım:

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

Aşağıda ise, içine product slice'ını ileteceğimiz fonksiyonun kendisini yazmaya başlayalım:

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

Şimdi süslü parantezler içinde UserReactions fonksiyonunun gövdesini yazalım. Bunun için reactionObj nesnemizin anahtar-değer çiftlerini map kullanarak döngüye alalım, her biri için buton işaretini ('+', '+/-' veya '-') ve sayısal tepki değerini (bunu store'daki product içinden tepkinin adına göre alacağız) elde edelim:

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

Sonrasında fonksiyon kodunun sonunda butonları içeren userReactions'ın yer aldığı HTML yapısını döndürelim:

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

Ayrıca index.css dosyasına biraz daha stil ekleyelim:

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

Eğer bu biraz kafa karıştırıcı görünüyorsa, endişelenmeyin, ilerledikçe her şey daha anlaşılır olacak.