Redux'a Slice Ekleme

Redux uygulamamızı oluşturmak için temel araçları hazırladık, şimdi doğrudan bileşenlerini uygulamaya geçebiliriz.

Bu derste, slice'lar (slices) kavramıyla başlayacağız. Redux uygulaması, store'da saklanan bir global state'e sahiptir. Bu state slice'lara ayrılır. Aslında, bir slice, uygulamanın belirli bir bölümü için orijinal state'i, reducer ve action mantığını içeren depolamanın bir parçasıdır.

Uygulamamızda ürünler yer alacak, dolayısıyla yapacağımız ilk slice, ürünlerle ilgili bilgileri içerecek. Ayrıca bir slice oluştururken, bu bilgileri nasıl işleyeceğini bilen bir reducer'ı eklemek gerekir.

Hadi src klasörüne girelim ve içinde parts klasörü oluşturalım, ardından onun içinde products klasörü oluşturalım - buraya ürünlerle ilgili tüm kod dosyalarını koyacağız. products klasöründe productsSlice.js dosyasını oluşturacağız ve ardından içine RTK'dan slice'ları oluşturmak için kullanacağımız createSlice fonksiyonunu import edeceğiz:

import { createSlice } from '@reduxjs/toolkit'

Şimdi ürünler için bir slice oluşturalım ve adını 'products' koyalım. reducers özelliği için şimdilik boş süslü parantez bırakalım:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Ayrıca initialState - slice state'inin başlangıç durumunu tanımlamamız gerekiyor, bu uygulama ilk çalıştırıldığında yüklenecek. Import işleminden hemen sonra ve slice oluşturmadan önce yazalım. Birkaç ürün verisini içeren nesneden oluşan bir dizi olsun. Her ürün için id, başlık, açıklama, fiyat ve miktar belirtelim:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Dosya kodunun sonunda, createSlice fonksiyonunun çalışması sonucunda ürettiği reducer'ı alıp export edeceğiz. Bu, uygulamanın diğer dosyalarında işimize yarayacak:

export default productsSlice.reducer

Öğrenci uygulamanızı açın. İçinde derste anlatıldığı gibi studentsSlice.js dosyasını oluşturun. İçinde createSlice kullanarak students slice'ını oluşturun. Slice'ın başlangıç değeri, öğrenci verilerini içeren birkaç nesneden oluşan bir dizi olsun.

Her öğrenci için şu alanları yapın: id, ad, soyad, yaş ve uzmanlık alanı.

studentsSlice.js dosyasının sonunda, elde edilen reducer'ı derste anlatıldığı gibi export edin.