Додавање на редуктор во 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.