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