Добавяне на редуктор в 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]++
	}
},

Нека в края на файла добавим експорт на получения създател на действие:

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

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

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

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

В края на файла не забравяйте да експортирате получения създател на действие voteClicked.