# Добавление редьюсера в Redux приложение

На прошлом уроке мы создали компонент `UserReaction` для того, чтобы у каждого продукта были еще и реакции пользователей. Теперь нам нужно написать редьюсер, который будет обрабатывать счетчик реакций при клике пользователем по кнопке той или иной реакции.

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

`reactionClicked(state, action) {},`

А теперь внутри фигурных скобочек, которые мы оставили пустыми на предыдущем шаге, напишем для него код. Во-первых мы извлечем id продукта из `payload` объекта `action` и название реакции:

`const { productId, reaction } = action.payload`

Затем из переданного стейта получим нужный продукт:

`const currentProduct = state.find(product => product.id === productId)`

И если такой продукт имеется, то увеличим значение переданной реакции на `1`:

`if (currentProduct) { currentProduct.reactions[reaction]++ }`

Вот и все, наш код для `reactionClicked` готов:

`reactionClicked(state, action) { const { productId, reaction } = action.payload const currentProduct = state.find(product => product.id === productId) if (currentProduct) { currentProduct.reactions[reaction]++ } },`

Давайте в конце файла добавим экспорт полученного action creator:

`export const { reactionClicked, productAdded, productUpdated } = productsSlice.actions`

Тут необходимо отметить два важных момента. Как вы помните из предыдущих уроков - обновлять вот так напрямую значение в коде редьюсера нельзя (посмотрите на эту строку: `reactions[reaction]++`), но нам сойдет это с рук, потому что мы это делаем внутри `createSlice`, который использует библиотеку Immer. Она и позаботится о том, чтобы переделать наш код в "безопасное" обновление значения. Это позволяет нам писать сложные вещи более простым способом.

Следующее, что необходимо помнить - объект `action` должен содержать минимально возможное количество информации - только для того чтобы указать что произошло. Не стоит делать в нем какие-либо вычисления. Все вычисления для обновления стейта стоит делать в редьюсере, здесь можно написать для этого столько логики, сколько потребуется.

Откройте ваше приложение со студентами и в файле `studentsSlice.js` добавьте еще один редьюсер `voteClicked` в поле `reducers`, как показано в уроке. Напишите код для него. Задача вашего редьюсера - при клике увеличивать значение `vote` (или голоса), по которому кликнули, для данного студента, на `1`.

В конце файла не забудьте экспортировать полученный action creator `voteClicked`.

← →
↑