Redux'ta Reducer'lar

Önceki derste, createSlice fonksiyonunu kullanarak products için bir slice ve store'da saklanan bu slice'ı güncelleyecek bir reducer oluşturduk. Bir kez daha hatırlatayım, Redux'ta state verileri reducer'lar aracılığıyla değiştirilir.

Reducer'ların bir dizi kısıtlamaya tabi olduğunu unutmamak gerekir. Bir reducer, state'i yalnızca mevcut state'in ve action nesnesinin aldığı değerlere dayanarak günceller ve ardından state'i nasıl değiştireceğine karar verir ve yeni değerini döndürür.

JavaScript'te nesnelerin ve dizilerin varsayılan olarak mutabel (değiştirilebilir) olduğunu biliyoruz. Ayrıca state'i doğrudan değiştirmememiz gerektiğini, bunun yerine yalnızca kopyalarla çalışmamız gerektiğini de biliyoruz.Reducer da bu kurala uymalıdır. Ancak bu mantığı manuel olarak yazmak oldukça yorucu ve karmaşık bir iş olabilir ve bu noktada devreye, 'mutabel' kodunuzu 'immutabel' hale dönüştüren Immer kütüphanesini kullanan createSlice fonksiyonu girer. Böylece, yalnızca createSlice veya createReducer fonksiyonlarını kullanırken 'günah işleyip' hayatı kolaylaştırabiliriz.

Reducer kısıtlamaları ayrıca asenkron mantık kullanımını, rastgele değerlerin hesaplanmasını ve diğer "yan etkilerin" gerçekleştirilmesini de içerir. Şimdi, reducer'ı daha yakından tanıdıktan sonra, ürün uygulamamıza geri dönelim.

Uygulamamızda önceki derslerde oluşturduğumuz bir store var, ancak şu anda içinde hiçbir şey yok. Haydi store.js dosyamızı açıp içine biraz kod ekleyelim. Başlangıç olarak, içe ürünler için reducer fonksiyonunu aktaralım:

import productsReducer from '../parts/products/productsSlice'

Şimdi reducer olarak, aktarılan productsReducer fonksiyonunu belirtebiliriz:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Yukarıdaki satırla store'muza, bir action tetiklendiğinde artık state.products slice'ına ait tüm verilerin productsReducer tarafından güncelleneceğini söylüyoruz.

Şimdi uygulamayı çalıştırabilirsiniz (konsoldaki geçersiz reducer uyarısının kaybolduğuna dikkat edin!), tarayıcıda Redux DevTools'u açıp sekmelerinde gezinebilirsiniz. Örneğin, Inspector sekmesindeki State sekmesine tıkladığımızda, uygulama ilk çalıştırıldığında başlangıç state değeri olarak görüntülenen iki ürün nesnemizi görebiliriz. Log monitor sekmesinde, global state'in içerdiği slice'ları görüyoruz - bu, iki nesne içeren products slice'ıdır. Ayrıca Chart sekmesine de bir göz atın.

Öğrenci uygulamanızı açın ve store.js dosyasının kodunu derste gösterildiği gibi değiştirin.

Uygulamanızı tarayıcıda çalıştırın ve Redux DevTools uzantısının sekmelerinde gezinin.