Redux'a Başka Bir Slice Ekleme

Önceki derslerde products slice'ı üzerinde yoğun bir şekilde çalıştık. Gerçek bir Redux uygulamasında, state içinde çeşitli amaçlar için birçok slice bulunabilir. Bu nedenle bu derste state'imize, uygulamamızda aslında ürünleri ekleyecek olan satıcılar için başka bir slice daha ekleyeceğiz.

Ürün uygulamamızı açalım ve yapacağımız ilk şey, parts klasöründe başka bir sellers klasörü oluşturmak olacak. Burada satıcılarla ilgili tüm kodları ve bileşenleri barındıracağız.

Şimdi, ürünlerde olduğu gibi, satıcılar için bir slice oluşturalım. Başlangıç olarak sellers klasöründe sellersSlice.js dosyasını oluşturalım ve içine createSlice'ı import edelim:

import { createSlice } from '@reduxjs/toolkit'

Standart adımları yapmaya devam ediyoruz. Slice için başlangıç değeri olarak dört satıcı oluşturalım. Basitlik için iki alanları olacak - id ve name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

Aşağıda createSlice kullanarak sellers slice'ını oluşturalım, başlangıç değerini geçelim. İleride ne satıcı ekleyeceğimiz ne de verilerini güncelleyeceğimiz için reducer'lar alanı şimdilik boş kalsın:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

Dosya sonunda elde ettiğimiz reducer'ı export etmeyi unutmayalım:

export default sellersSlice.reducer

Şimdi app klasöründeki store.js dosyasını açmamız ve elde ettiğimiz reducer'ı import etmemiz gerekiyor:

import sellersReducer from '../parts/sellers/sellersSlice'

Ve sonra configureStore içinde sellers için reducer olarak atayalım:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Öğrenci uygulamanızı açın. Başka bir teachers klasörü oluşturun, burada öğretmenlerle ilgili kod dosyaları olacak. İçinde teachersSlice.js dosyasını oluşturun. Ders materyallerinden yararlanarak içinde createSlice kullanarak teachers slice'ını oluşturun.

Her öğretmen veri nesnesinin üç özelliği olsun: id, name (soyadı ve baş harfleri içerecek, örneğin 'Petrov A.V.') ve ders (aklınıza gelen herhangi biri - fizik, matematik, biyoloji vb.). Slice için başlangıç değeri olarak 3 tane böyle öğretmen nesnesi oluşturun.

Elde ettiğiniz teachersReducer reducer'ını store.js dosyasına import edin ve derste gösterildiği gibi teachers için reducer olarak atayın.