Дадаванне рэдʼюсара ў Redux прыкладанне

У мінулым уроке мы стварылі кампанент UserReaction для таго, каб у кожнага прадукту былі яшчэ і рэакцыі карыстальнікаў. Цяпер нам трэба напісаць рэдʼюсер, які будзе апрацоўваць лічыльнік рэакцый пры кліку карыстальнікам па кнопцы той ці іншай рэакцыі.

Давайце адкрыем наша прыкладанне з прадуктамі, а ў ім файл productsSlice.js з усімі рэдʼюсерамі. Цяпер у ўласцівасці reducers створым яшчэ адзін рэдʼюсер reactionClicked (можам паставіць яго першым - перад productAdded, хоць гэта без розніцы). Як звычайна, перададзім яму параметрамі state і action:

products/productsSlice.jsreactionClicked(state, action) {},

А цяпер унутры фігурных дужак, якія мы пакінулі пустымі на папярэднім кроку, напішам для яго код. Па-першае мы здабудзем id прадукту з payload абʼекта action і назву рэакцыі:

products/productsSlice.jsconst { productId, reaction } = action.payload

Затым з перададзенага стэйту атрымаем патрэбны прадукт:

products/productsSlice.jsconst currentProduct = state.find(product => product.id === productId)

І калі такі прадукт маецца, то павялічым значэнне перададзенай рэакцыі на 1:

products/productsSlice.jsif (currentProduct) {
  currentProduct.reactions[reaction]++
}

Вось і ўсё, наш код для reactionClicked гатовы:

products/productsSlice.jsreactionClicked(state, action) {
  const { productId, reaction } = action.payload
  const currentProduct = state.find(product => product.id === productId)
  if (currentProduct) {
    currentProduct.reactions[reaction]++
  }
},

Давайце ў канцы файла дадамо экспарт атрыманага action creator:

products/productsSlice.jsxexport const {
  reactionClicked,
  productAdded,
  productUpdated
} = productsSlice.actions

Тут неабходна адзначыць два важныя моманты. Як вы памятаеце з папярэдніх урокаў - абнаўляць вось так напрамую значэнне ў кодзе рэдʼюсара нельга (паглядзіце на гэты радок: reactions[reaction]++), але нам сойдзе гэта з рук, таму што мы гэта робім унутры createSlice, які выкарыстоўвае бібліятэку Immer. Яна і паклапоціцца пра тое, каб перарабіць наш код у "бяспечнае" абнаўленне значэння. Гэта дазваляе нам пісаць складаныя рэчы больш простым спосабам.

Наступнае, што неабходна памятаць - абʼект action павінен змяшчаць мінімальна магчымая колькасць інфармацыі - толькі для таго каб паказаць што адбылося. Не варта рабіць у ім якія-небудзь вылічэнні. Усе вылічэнні для абнаўлення стэйту варта рабіць у рэдʼюсары, тут можна напісаць для гэтага столькі логікі, колькі патрабуецца.