Добавление редьюсера в 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.