Redukseri dhe veprimi (action) në Redux

Në mësimin e kaluar përfunduam formën për shtimin e produktit dhe e shfaqëm në faqen kryesore. Por për momentin të dhënat e shtuara nuk ruhen, me fjalë të tjera produkti i ri nuk i shtohet atyre ekzistues në store. Le ta rregullojmë këtë.

Për fillim, në aplikacionin tonë të produkteve do të hapim skedarin productsSlice.jsx dhe do të shkruajmë në vetinë reducer për createSlice funksionin productAdded, i cili do të merret me shtimin e produktit në store bazuar në state-in aktual dhe veprimin (action) që i transmetohet. Duhet theksuar se këtu nuk na transmetohet i gjithë state-i, por vetëm ajo pjesë e tij që i përgjigjet produkteve (slice products e njeh vetëm atë). Objekti me produktin e ri do të gjendet në vetinë payload të objektit action, i cili do të gjenerohet nga përpunuesi (handler) kur shtypet butoni i ruajtjes në formë. Si rezultat, redukseri productAdded do të duket në kod në createSlice kështu:

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

Po ndërsa për action? Që në fillim të tutorialit ne përmendëm se action është një ngjarje, e përfaqësuar në formë objekti, e cila përshkruan atë që ka ndodhur në aplikacion. Folëm edhe për faktin se mund të përdoret funksioni action creator, i cili do të na krijojë një të tillë objekt, për shembull kështu:

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

Lajmi i mirë është se ne nuk kemi nevojë të bëjmë asgjë, sepse këtë do ta bëjë për ne funksioni createSlice, të cilin e përdorim. Sa herë që shkruajmë një reducer, ajo automatikisht do të krijojë për ne një action creator me të njëjtin emër. Na mbetet vetëm të eksportojmë action creator-in e përftuar për përdorim të mëtejshëm në komponentë. Le ta bëjmë këtë në fund të skedarit përpara eksportit të redukserit, kështu:

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

Hapni aplikacionin tuaj me studentë, pastaj hapni skedarin studentsSlice.jsx, shtoni vlerën e fushës reducer për createSlice, siç tregohet në mësim.

Shtoni në fund të skedarit studentsSlice.jsx eksportin e funksionit të përftuar action creator.