Action-ի ուղարկում Redux հավելվածում

Այժմ մենք ունենք reducer, որը թարմացնում է ռեակցիաների հատվածը: Այժմ մեզ անհրաժեշտ է ավելացնել 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 reducer-ի կոդում, որպեսզի նոր ապրանքներն ունենան նույն ֆունկցիոնալությունը: Եկեք դա անենք դրա 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 hook-ը և reactionClicked-ը:

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

Կոդի սկզբում՝ UserReactions ֆունկցիայի մարմնում, առաջին տողով (const userReactions ...-ից առաջ) գրենք.

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 կոմպոնենտներում: