Ռեդյուսեր և action Redux-ում

Անցյալ դասին մենք ավարտեցինք արտադրանք ավելացնելու ձևը և ցուցադրեցինք այն գլխավոր էջում: Բայց առայժմ ավելացված տվյալները չեն պահպանվում, այլ կերպ ասած՝ նոր արտադրանքը չի ավելանում store-ում գոյություն ունեցողներին: Եկեք շտկենք դա:

Սկզբում մեր արտադրանքի հավելվածում մենք կբացենք productsSlice.jsx ֆայլը և կգրենք createSlice-ի reducer հատկության մեջ productAdded ֆունկցիան, որը կզբաղվի արտադրանքը store-ում ավելացնելով՝ հիմնվելով նրան փոխանցված ընթացիկ state-ի և action-ի վրա: Պետք է նշել, որ այստեղ մեզ փոխանցվում է ոչ ամբողջ state-ը, այլ միայն դրա այն մասը, որն պատասխանատու է արտադրանքի համար (products սլայսը գիտի միայն դրա մասին): Նոր արտադրանքով օբյեկտը կգտնվի action օբյեկտի payload հատկության մեջ, որը կգեներացվի ձևի պահպանման կոճակի կարգավորիչի կողմից: Արդյունքում productAdded ռեդյուսերը createSlice-ի կոդում կունենա հետևյալ տեսքը.

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Իսկ ի՞նչ կա action-ի հետ: Ուսումնականի հենց սկզբում մենք նշեցինք, որ action-ը որոշակի իրադարձություն է, որը ներկայացված է որպես օբյեկտ, որը նկարագրում է այն, ինչ տեղի է ունեցել հավելվածում: Մենք նաև խոսեցինք այն մասին, որ կարելի է օգտագործել action creator ֆունկցիան, որը մեզ համար կստեղծի այդպիսի օբյեկտ, օրինակ այսպես.

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Լավ լուրն այն է, որ մեզ պետք չէ ոչինչ անել, և դա մեր փոխարեն կանի createSlice ֆունկցիան, որը մենք օգտագործում ենք: Հենց մենք գրեցինք reducer-ը, այն ավտոմատ կստեղծի մեզ համար action creator նույն անունով: Մեզ միայն մնում է էքսպորտել ստացված action creator-ը հետագա օգտագործման համար կոմպոնենտներում: Եկեք դա անենք ֆայլի վերջում ռեդյուսերի էքսպորտից առաջ, ահա այսպես.

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Բացեք ձեր ուսանողների հավելվածը, ապա studentsSlice.jsx ֆայլը, լրացրեք createSlice-ի reducer դաշտի արժեքը, ինչպես ցույց է տրված դասում:

Ավելացրեք ֆայլի վերջում studentsSlice.jsx ստացված action creator ֆունկցիայի էքսպորտը: