Додавање редјусера у 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]++
  }
},

Додајмо на крају фајла експорт добијеног креатора акције:

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

Овде је потребно истаћи две важне ствари. Како се сећате из претходних лекција - није дозвољено директно ажурирати вредност у коду редјусера овако (погледајте овај ред: reactions[reaction]++), али нам је то овде прихватљиво, јер то радимо унутар createSlice, који користи библиотеку Immer. Она ће се побринути да претвори наш код у „безбедно“ ажурирање вредности. Ово нам омогућава да пишемо сложене ствари на једноставнији начин.

Следеће што треба запамтити је да објекат action треба да садржи минималну могућу количину информације - довољну само да укаже шта се десило. Не треба у њему радити никакве прорачуне. Сви прорачуни за ажурирање стања треба да се обављају у редјусеру, где за то можете написати колико год логике потребно.