Добавяне на редуктор в 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 трябва да съдържа минимално възможното количество информация - само необходимата, за да покаже какво се е случило. Не трябва да се правят в него каквито и да е изчисления. Всички изчисления за обновяване на състоянието трябва да се правят в редуктора, тук можете да напишете за целта толкова логика, колкото е необходима.