Redux store'da ürün verilerini değiştirme

Ürün eklemeyi öğrendik, peki ya bir ürünle ilgili bilgileri değiştirmek istiyorsak? Bunun nasıl yapılacağını bu ve sonraki derslerde inceleyelim.

Ürün uygulamamızı açalım ve productsSlice.js dosyasına girelim. products dilimi için, bir ürün güncellendiğinde tetiketlenecek başka bir reducer yazmamız gerekiyor. Ona productUpdated adını verelim ve reducers alanına productAdded reducer'ından sonra ekleyelim. Ayrıca hemen parametre olarak state ve action'ı geçelim, hatırladığımız gibi reducer bunlar üzerinde çalışır:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

Şimdi bir ürünü güncellemek için hangi verilere ihtiyacımız olacağını düşünelim. Her şeyden önce - bu id, onunla store'daki ilgilendiğimiz ürünü bulabileceğiz. Geri kalan veriler - isim, açıklama, fiyat ve miktar değişiklik için bizde olacak. Tüm bu değerleri bize gelen action nesnesinin payload özelliğinden alacağız, ve eğer onu elle yazıyor olsaydık, aşağıda gösterildiği gibi görünürdü. payload özelliğinin beklenen değerinin tek bir argüman olduğuna dikkat edin, bu yüzden buraya bir nesne ileteceğiz (bundan sonraki kısımda bunun hakkında konuşacağız):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Ana noktaları belirledikten sonra, şimdi productUpdated için süslü parantezler içine kodu yazabiliriz. Önce action nesnesinden değiştirilen verileri alalım:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Şimdi alınan id'ye göre, değiştirilmesi gereken ürünü bulacağız:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Eğer böyle bir ürün store'da bulunursa, onun verilerini yeni değerlerle değiştireceğiz:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Geriye kalan, bileşende kullanılmak üzere action creator'ı dışa aktarmak, ki bunu createSlice bizim için istekle oluşturacak. Onu mevcut productAdded ile birlikte, dosyanın sonundaki dışa aktarıma ekleyelim:

export const { productAdded, productUpdated } = productsSlice.actions

Öğrenci uygulamanızı açın. Ders materyalini inceledikten sonra, studentsSlice.js dosyasında productsSlice için, kullanıcı tarafından değiştirildiklerinde store'daki öğrenci verilerini güncelleyecek başka bir reducer yazın. Ona studentUpdated adını verin.

Peki bu durumda sizin action nesneniz nasıl görünürdü? Kodunu yanıt olarak gönderin.

Dosyanın sonunda, elde edilen action creator studentUpdated'ı dışa aktarın.