Адпраўка action у Redux дадатку

Цяпер у нас ёсць рэдьюсер для абнаўлення слайса з рэакцыямі. Зараз нам неабходна дадаць адпраўку action, якая будзе спрацоўваць пры кліку карыстальніка па кнопцы з рэакцыяй. Але перш, каб усё цалкам працавала, нам трэба ўнесці пару зманенняў.

Давайце адкрыем наш дадатак з прадуктамі, а ў ім файл productsSlice.js. Паглядзіце на вызначэнне initialState. Бачыце? У аб'ектах няма ўласцівасці з рэакцыямі. Давайце гэта выправім, усталяваўшы лічыльнікі кожнай з рэакцый у 0:

products/productsSlice.js{
  id: '1',
  title: 'Product1',
  desc: 'This is an amazing product',
  price: '300',
  amount: '30',
  reactions: {
    good: 0,
    soso: 0,
    bad: 0,
  },
},

У другі аб'ект для ініцыялізацыі дадайце ўласцівасць reactions самі. Гэтую ж уласцівасць нам неабходна дадаць ніжэй у код для рэдьюсера productAdded, каб у новых прадуктах таксама быў такі функцыянал. Давайце зробім гэта для яго метаду prepare:

products/productsSlice.jsprepare(title, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      title,
      desc,
      price,
      amount,
      seller: sellerId,
      reactions: {
        good: 0,
        soso: 0,
        bad: 0,
      },
    },
  }
},

Цяпер прыступім да адпраўкі action. Адкрыем файл UserReactions.jsx, затым імпартуем у яго хук useDispatch і reactionClicked:

products/UserReactions.jsximport { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

У пачатку коду ў целе функцыі UserReactions першай строчкай (перад const userReactions ...) пропiшем:

products/UserReactions.jsxconst dispatch = useDispatch()

І навясём на кнопку рэакцыі адпраўку reactionClicked пры кліку, пры гэтым у нас будзе перадавацца id прадукту і назва рэакцыі, па якой клікнулі:

products/UserReactions.jsx<button
  key={name}
  type="button"
  className="reaction-button"
  onClick={() =>
    dispatch(reactionClicked({ productId: product.id, reaction: name }))
  }
>
  {image} {product.reactions[name]}
</button>

Нам засталося цяпер вывесці кампанент з рэакцыямі у верстцы для нашых староначак. Зробім гэта ў файле ProductsList.jsx перад элементам Link:

products/ProductsList.jsx<UserReactions product={product} />

І дакладна таксама перад элементам Link на староначцы прадукту ў файле ProductPage.jsx:

products/ProductPage.jsx<UserReactions product={product} />

Цяпер, калі ўсё стала на свае месцы, мы можам запусціць наш дадатак. Паспрабуем паклікаць на кнопачкі з рэакцыямі. Можам дадаць новы прадукт і таксама панаціскаць на іх. Цяпер, дзе б мы не клікалі па кнопках з рэакцыямі, змененыя значэнні будуць адлюстроўвацца для дадзенага прадукту на ўсіх старонках. Паглядзіце старонку асобнага прадукту (на якой вы клікалі па рэакцыях) і старонку з іх спісам і наадварот, для ўсіх старонак лік рэакцый для канкрэтнага прадукту будзе аднолькавым.

Гэты ўрок быў завяршальным у главе па працы з данымі ў Redux. Мы больш паглыблена папрацавалі з данымі ў Redux store і цяпер ведаем, як дадаваць неабходны нам функцыянал у дадатак і выкарыстоўваць даныя ў React кампанентах.