Redux'ta Action Nesnesi için Veri Hazırlama

Son zamanlarda sizinle, createSlice fonksiyonunun action.payload oluştururken bir argüman beklediğini konuşuyorduk. Bir yandan bu onun kullanımını kolaylaştırırken, diğer yandan action nesnesinin içeriğini hazırlamak için ekstra işlemler gerektirebilir.

Hadi ürün uygulamamızı açalım, ve içindeki NewProductForm.jsx dosyasını açalım. Şu kod satırına dikkat edin:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Burada payload nesnesini doğrudan React bileşeninde oluşturuyoruz ve onu productAdded action'ına iletiyoruz. Ya aynı action'ı birden fazla bileşenden göndermemiz gerekirse veya oluşturma mantığı karmaşık hale gelirse? Ideal olarak bileşenimizin bu action için payload içindeki nesnenin nasıl göründüğünü bilmemesi gerekir. Ayrıca sürekli kod tekrarından da hoşlanmıyoruz.

Bu sorunları çözmemize yine ünlü createSlice'ımız yardımcı olabilir, çünkü bir reducer yazarken, içinde çeşitli mantık yazabildiğimiz, rastgele sayılar üretebildiğimiz prepare callback fonksiyonunu kullanmamıza izin verir. Bu durumda reducer alanı için değer aşağıdaki nesne şeklinde temsil edilebilir:

{reducer, prepare}

Hadi productsSlice.js dosyamızı açalım ve productAdded reducer'ı için kodu değiştirelim. Şu kod parçası:

productAdded(state, action) {
	state.push(action.payload)
},

Bunu, reducer fonksiyonunun store'daki state'i güncellemekle, prepare fonksiyonunun ise oluşturulmuş id ve diğer verilerimizle payload nesnesini döndürmekle görevli olduğu şu hale getireceğiz:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Artık id'yi bileşende değil, burada oluşturacağımız için, nanoid'i import'a ekleyelim:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Son olarak NewProductForm.jsx dosyasında değişiklik yapalım. Şu satır yerine:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

İhtiyacımız olan verileri sadece virgülle ilettiğimiz (bu dosyada import'tan nanoid'i kaldırmayı unutmayın) şu satır olacak:

dispatch(productAdded(name, desc, price, amount))

Uygulamayı çalıştıralım, ardından yeni bir ürün oluşturalım ve hiçbir şeyi bozmadığımızdan emin olalım.

Öğrenci uygulamanızı açın. StudentsSlice.js dosyasında studentAdded reducer'ınızı, derste gösterildiği gibi {reducer, prepare} nesnesi şeklinde olacak şekilde yeniden yazın.

NewStudentForm.jsx dosyasında, derste gösterildiği gibi ilgili değişiklikleri yapın. Uygulamayı çalıştırın ve her şeyin eskisi gibi çalıştığından emin olun.