Redux Uygulamasına Reducer Ekleme

Önceki derste, her bir ürünün kullanıcı tepkilerine de sahip olması için UserReaction bileşenini oluşturduk. Şimdi, kullanıcı bir tepki butonuna tıkladığında tepki sayacını işleyecek bir reducer yazmamız gerekiyor.

Ürün uygulamamızı açalım ve içindeki tüm reducer'ların bulunduğu productsSlice.js dosyasını açalım. Şimdi reducers özelliği içinde başka bir reducer reactionClicked oluşturalım (onu productAdded'den önce ilk sıraya koyabiliriz, fark etmez). Her zamanki gibi, ona parametre olarak state ve action'ı geçelim:

reactionClicked(state, action) {},

Şimdi bir önceki adımda boş bıraktığımız süslü parantezlerin içine onun için kodu yazalım. İlk olarak, ürün id'sini action nesnesinin payload'ından ve tepki adını çıkaralım:

const { productId, reaction } = action.payload

Ardından, iletilen state'den ilgili ürünü alalım:

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

Ve eğer böyle bir ürün varsa, iletilen tepkinin değerini 1 artıralım:

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

İşte bu kadar, reactionClicked için kodumuz hazır:

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

Dosyanın sonunda elde edilen action creator'ı dışa aktaralım:

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

Burada iki önemli noktaya dikkat etmek gerekiyor. Önceki derslerden hatırlayacağınız gibi - reducer kodunda değeri bu şekilde doğrudan güncellemek yasaktır (şu satıra bakın: reactions[reaction]++), ancak bizim için sorun olmayacak, çünkü bunu Immer kütüphanesini kullanan createSlice içinde yapıyoruz. Immer, kodumuzu değerin "güvenli" bir şekilde güncellenmesine çevirmekle görevli olacak. Bu, karmaşık şeyleri daha basit bir şekilde yazmamıza olanak tanır.

Hatırlanması gereken bir sonraki şey - action nesnesi mümkün olan minimum bilgiyi içermelidir - sadece ne olduğunu belirtmek için. İçinde herhangi bir hesaplama yapmamalısınız. State'i güncellemek için yapılan tüm hesaplamalar reducer'da yapılmalıdır, burada bunun için gereken kadar mantık yazılabilir.

Öğrenci uygulamanızı açın ve studentsSlice.js dosyasında, derste gösterildiği gibi reducers alanına başka bir reducer voteClicked ekleyin. Bunun için kodu yazın. Reducer'ınızın görevi, tıklandığında ilgili öğrenci için tıklanan vote (veya oy) değerini 1 artırmak.

Dosyanın sonunda, elde edilen action creator voteClicked'ı dışa aktarmayı unutmayın.