Redux'ta State Yapısını Değiştirme

Redux uygulamamızın harici bir sunucu ile etkileşimi için uygulayacağımız ilk aşama, uygulama başlatıldığında üzerinde depolanan verileri almaktır. Ancak öncelikle uygulamamızda bazı değişiklikler yapalım.

Ürünlerle ilgili uygulamamızı açalım ve içindeki productsSlice.js dosyasını açalım. initialState tanımına dikkat edin. Başlangıçta ürünlerle ilgili slice'ımız productsSlice, içinde ürün verileriyle nesnelerin (bizim durumumuzda iki tane) bulunduğu bir dizidir. İlk olarak, artık onları bir sunucudan yükleyeceğimiz için, onları initialState'den kaldırmamız gerekiyor. İkinci olarak, sunucuya API istekleri göndereceğiz ve bunların durumunu bilmek bizim için önemli olacak. Bu iki şeyi göz önünde bulundurarak, initialState'i yeniden düzenleyelim. Artık products (başlangıçta burada hiç veri olmayacak, sadece boş bir dizi), status ve error alanlarına sahip basit bir nesne olsun. Şimdi initialState için kodumuz biraz daha kısa olacak:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Şimdilik durumu 'idle' (hareketsiz) olarak ayarladık, çünkü başlangıçta herhangi bir istek göndermiyoruz, genel olarak değişecek ve 'loading', 'succeeded', 'failed' değerlerini alabilir. Durumu belirtmek için size uygun gelen isimleri seçebileceğinizi unutmayın.

Kodda aşağıya inelim. initialState'deki değişikliğin ardından, reducer fonksiyonlarında bu state ile çalıştığımız kodu da değiştirmemiz gerekiyor. productAdded için koda bakalım:

state.push(action.payload)

Artık yeni ürünleri doğrudan ürünler için state'e değil, onun state.products özelliğine ekleyeceğiz. Bu nedenle, yukarıdaki satırı şu şekilde değiştirelim:

state.products.push(action.payload)

Buna göre, aynı değişiklikleri reactionClicked reducer'ı için de yapalım. Şunun yerine:

const currentProduct = state.find((product) => product.id === productId)

Artık şöyle olacak:

const currentProduct = state.products.find((product) => product.id === productId)

productUpdated reducer'ının kodunda da state'i state.products ile değiştirin.

Öğrencilerle ilgili uygulamanızı açın. İçindeki studentsSlice.js dosyasını açın. Artık initialState'inizin üç özelliği olsun: students, status, error - derste gösterildiği gibi yeniden düzenleyin.

İlgili değişiklikleri aşağıdaki kodda da yapın. Üç reducer fonksiyonunuzun kodunda state'i state.students ile değiştirin.