Եվրոպական միության մեջ Redux-ին ևս մեկ slice-ի ավելացում

Նախորդ դասերին մենք ինտենսիվ աշխատանք ենք տարել products ապրանքների slice-ի վրա: Իրական Redux հավելվածում state-ում կարող են լինել բազմաթիվ slice-ներ տարբեր նպատակների համար: Այդ իսկ պատճառով այս դասում մենք կավելացնենք state-ին ևս մեկ slice վաճառողների համար, որոնք փաստացի կլինեն նրանք, ովքեր կավելացնեն ապրանքները մեր հավելվածում:

Բացենք մեր ապրանքներով հավելվածը և առաջինը, ինչ կանենք, դա parts պանակում կստեղծենք ևս մեկ պանակ sellers, այստեղ մենք կտեղադրենք ամբողջ կոդը և կոմպոնենտները, որոնք վերաբերում են վաճառողներին:

Այժմ, ինչպես ապրանքների դեպքում, եկեք ստեղծենք slice վաճառողների համար: Սկզբից sellers պանակում ստեղծենք sellersSlice.js ֆայլը և իմպորտ կատարենք դրա մեջ createSlice:

import { createSlice } from '@reduxjs/toolkit'

Շարունակում ենք կատարել ստանդարտ քայլերը: Որպես սկզբնական արժեք slice-ի համար ստեղծենք չորս վաճառող: Պարզության համար նրանք կունենան երկու դաշտ - id և name:

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

Ստորև օգտագործելով createSlice ստեղծենք slice sellers, փոխանցենք դրան սկզբնական արժեքը: Քանի որ մենք չենք ավելացնի վաճառողներ, ոչ էլ կթարմացնենք նրանց տվյալները հետագայում, ապա թող reducers դաշտը մեզ մոտ մնա դատարկ:

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

Ֆայլի վերջում չմոռանանք export ստացված reducer-ի մասին:

export default sellersSlice.reducer

Այժմ մեզ անհրաժեշտ է բացել store.js ֆայլը app պանակում և իմպորտ կատարել ստացված reducer-ը:

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

Եվ ապա նշանակել այն configureStore-ում որպես reducer sellers-ի համար:

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

Բացեք ձեր ուսանողներով հավելվածը: Ստեղծեք ևս մեկ պանակ teachers, այստեղ ձեր մոտ կլինեն ֆայլեր կոդով, որոնք վերաբերում են դասախոսներին: Ստեղծեք դրա մեջ teachersSlice.js ֆայլը: Օգտագործելով դասի նյութերը, ստեղծեք դրա մեջ teachers slice createSlice-ի օգնությամբ:

Թող յուրաքանչյուր օբյեկտ ուսուցչի տվյալներով ձեր մոտ ունենա երեք հատկություն՝ id, name (որը կպարունակի ազգանունը և ինիցիալները, օրինակ 'Պետրով Ա.Վ.') և առարկա (ցանկացած, ինչ կհորինեք - ֆիզիկա, մաթեմատիկա, կենսաբանություն և այլն): Կատարեք 3 այդպիսի օբյեկտ ուսուցիչներով որպես slice-ի սկզբնական արժեք:

Իմպորտ արեք ստացված reducer-ը teachersReducer store.js-ում և նշանակեք այն որպես reducer teachers-ի համար, ինչպես ցույց է տրված դասում: