Redux aplikasiyaya reducerin elavesi

Kecen dersde her bir mehsulun istifadeci reaksiyalari da olması ucun UserReaction komponentini yaratmisdiq. Indi bizə lazimdir ki, reducer yazaq, hansi ki, istifadeci uygun reaksiya duymesine klikleyende reaksiya saygicini emelə getirecek.

Gelin mehsullarla olan aplikasiyamizi açaq, ve onun icinde butun reducerler olan productsSlice.js faylını. Indi reducers xüsusiyyetinde yenə bir reducer reactionClicked yaradaq (onu birinci - productAdded-den qabaq da qoya bilerik, her ne qeder ki, ferqi yoxdur). Her zaman oldugu kimi, ona parametr kimi state ve action oturek:

reactionClicked(state, action) {},

Indi ise evvelki addimda bos buraxdiqimiz buruq moterizelerin daxilinde, onun ucun kodu yazaq. Ilk once, action obyektinin payload-inden mehsulun id-sini ve reaksiyanin adini cixartaq:

const { productId, reaction } = action.payload

Sonra ise, oturulen state-den lazim olan mehsulu goturek:

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

Ve eger bele bir mehsul varsa, onda oturulen reaksiyanin qiymetini 1 vahid artiracayiq:

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

Budur, bizim reactionClicked ucun kod hazirdir:

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

Gelin faylin sonunda alinan action creator-i export edek:

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

Burada iki mühum məqami qeyd etmek lazımdır. Kecen derslerden xatirlayırsınız ki, reducerin kodu icinde qiymeti birbaşa bu formada yenilemek olmur (bu setre baxin: reactions[reaction]++), lakin bizim ucun bu qebul edilir, cunki biz bunu Immer kitabxanasindan istifade eden createSlice daxilinde edirik. O, bizim kodumuzu "tehlukesiz" yenilemeye cevirməyə temin edecek. Bu, bizə mürəkkəb şeyleri daha sadə üsulla yazmağa imkan verir.

Xatırlamaq lazım olan növbəti şey budur ki, action obyekti minimum mümkün miqdarda informasiya ehtiva etmelidir - yalnız nəyin baş verdiyini göstermək üçün. Onda heç bir hesablama aparmaq olmaz. State-i yeniləmək üçün bütün hesablamalar reducer daxilinde aparılmalıdır, burada bunun üçün nə qədər məntiq tələb olunursa, o qədər yazmaq olar.

Telebe lerle olan aplikasiyanizi achin ve studentsSlice.js faylinda dersde gosterildiyi kimi reducers sahəsində əlavə bir reducer voteClicked elave edin. Onun üçün kod yazın. Sizin reducerinizin vezifesi - kliklene nə vaxt vote (ve ya ses) qiymetini, hansi ki, kliklendi, hemin telebe üçün 1 vahid artırmaqdir.

Faylin sonunda alinmiş action creator voteClicked export etməyi unutmayın.