Додавање редјусера у 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.