Redux'ta Reducer ve Action

Önceki derste, ürün ekleme formunu tamamladık ve ana sayfada gösterdik. Ancak şu an için eklenen veriler kaydedilmiyor, başka bir deyişle yeni ürün mevcut store'a eklenmiyor. Bunu düzeltelim.

İlk olarak, ürün uygulamamızda productsSlice.jsx dosyasını açacağız ve createSlice için reducer özelliğine, kendisine iletilen mevcut state ve action'a dayanarak store'a ürün eklemekle görevli productAdded fonksiyonunu yazacağız. Burada bize tüm state'in değil, yalnızca ürünlerden sorumlu olan kısmının iletildiğini belirtmek gerekir (products slice'ı yalnızca bu kısmı bilir). Yeni ürün nesnesi, formdaki kaydetme düğmesine basıldığında event handler'ı tarafından oluşturulacak olan action nesnesinin payload özelliğinde yer alacaktır. Sonuç olarak, productAdded reducer'ı createSlice kodunda şu şekilde görünecektir:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Peki ya action? Eğitimin en başında, action'ın uygulamada ne olduğunu açıklayan, nesne biçimindeki bir olay olduğundan bahsetmiştik. Ayrıca, bize şu şekilde bir nesne oluşturan bir action creator fonksiyonu kullanabileceğimizden de bahsetmiştik:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

İyi haber şu ki, hiçbir şey yapmamıza gerek yok, bunu bizim yerimize kullandığımız createSlice fonksiyonu halledecek. Reducer'ı yazdığımızda, otomatik olarak aynı isme sahip bir action creator oluşturacaktır. Geriye kalan, elde edilen action creator'ı bileşenlerde kullanılmak üzere dışa aktarmaktır. Bunu dosyanın sonunda, reducer'ı dışa aktarmadan önce şu şekilde yapalım:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Öğrenci uygulamanızı açın, ardından studentsSlice.jsx dosyasını açın ve derste gösterildiği gibi createSlice için reducer alanının değerini ekleyin.

studentsSlice.jsx dosyasının sonuna, elde edilen action creator fonksiyonunun export'unu ekleyin.