Redux-da əlavə bir slice-in əlavə edilməsi

Əvvəlki dərslərdə biz məhsullar üçün products slicei üzərində sıx işlədik. Real Redux proqramında state-də müxtəlif məqsədlər üçün çoxlu slice-lar ola bilər. Ona görə də bu dərsdə biz state-ə satıcılar üçün əlavə bir slice əlavə edəcəyik, hansı ki, əslində proqramımızda məhsulları əlavə edənlər olacaq.

Məhsullarla bağlı proqramımızı açaq və ilk edəcəyimiz iş, parts qovluğunda sellers adlı başqa bir qovluq yaratmaq olacaq, burada biz satıcılarla bağlı bütün kod və komponentləri yerləşdirəcəyik.

İndi, məhsullarda olduğu kimi, gəlin satıcılar üçün bir slice yaradaq. Əvvəlcə sellers qovluğunda sellersSlice.js faylını yaradıb onun içinə createSlice import edək:

import { createSlice } from '@reduxjs/toolkit'

Standart addımları yerinə yetirməyə davam edirik. Slice üçün ilkin dəyər kimi dörd satıcı yaradaq. Sadəlik üçün onların iki xanası olacaq - id və 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 köməyi ilə sellers slice-ni yaradaq, ona ilkin dəyəri ötürək. Biz gələcəkdə nə satıcı əlavə edəcəyik, nə də onların məlumatlarını yeniləyəcəyik, ona görə də reducer-lar sahəsi hələlik boş qalsın:

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

Faylın sonunda alınan reducer-in eksport edilməsini unutmayaq:

export default sellersSlice.reducer

İndi bizim app qovluğundakı store.js faylını açıb alınan reducer-i import etməyimiz lazımdır:

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

Və sonra onu configureStore içində sellers üçün reducer kimi təyin edək:

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

Tələbələrinizlə bağlı proqramınızı açın. teachers adlı başqa bir qovluq yaradın, burada siz müəllimlərlə bağlı kod faylları olacaq. Orada teachersSlice.js faylını yaradın. Dərs materiallarından istifadə edərək, onun içində createSlice köməyi ilə teachers slice-ni yaradın.

Hər bir müəllim məlumat obyektində üç xüsusiyyət olsun: id, name (hansı ki, soyadı və ixtisarları ehtiva edəcək, məsələn 'Petrov A.V.') və fənn (ixtiyari, ağlınıza gələni - fizika, riyaziyyat, biologiya və s.). Slice üçün ilkin dəyər kimi 3 belə müəllim obyekti hazırlayın.

Alınan teachersReducer reducer-ini store.js faylına import edin və dərsdə göstərildiyi kimi, onu teachers üçün reducer kimi təyin edin.