Redux-daky reducer we action

Öňki sapakda biz önüm goşmak üçin formany tamamladyk we ony baş sahypada görkezdik. Ýöne häzirçe goşulan maglumatlar saklanmaýar, başga sözler bilen aýdylanda täze önüm ammardaky (store) bar bolanlara goşulmaýar. Geliň muny düzeliň.

Başlangyçda, önümler bar bolan programmamyzda productsSlice.jsx faýlyny açarys we createSlice üçin reducer aýratynlygynda productAdded funksiýasyny ýazarys, bu funksiýa ona berilen häzirki ýagdaýy (state) we hereketi (action) esasynda ammara (store) önüm goşmak bilen meşgullanar. Şunuň bellemek gerek, bu ýerde bize doly ýagdaý (state) däl, eýsem diňe önümler üçin jogap berýän bölegi berilýär (products dilimi diňe şony bilýär). Täze önüm bilen obýekty action obýektiniň payload aýratynlygynda bolar, bu obýekti formanyň saklamak düwmesine basylanda işleýji (handler) döreder. Netijede, productAdded reduceri createSlice kodunda şeýle görüner:

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

Action barada näme? Okuw gollanmasynyň başynda biz action barada gürrüň beripdik, bu programma içinde nämäniň ýüze çykanlygyny beýan edýän, obýekt görnüşinde ýüze çykyşdyr. Şeýle hem, biz hereket ýasayjyny (action creator) ulanýanlygymyz barada gürrüň beripdik, bu biz üçin şeýle obýekti döredip biler, meselem şuňa meňzeş:

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

Gowy habar şu, biz hiç zat etmeli däl, muny biziň üçin biz ulanýan createSlice funksiýasy eder. Biz reduceri ýazanymyz bilen, ol awtomatik suratda biz üçin şol bir at bilen hereket ýasayjyny (action creator) döreder. Biz üçin diňe komponentlerde ulanylmak üçin alnan hereket ýasayjyny (action creator) eksport etmek galýar. Faýlyň ahyrynda, reduceri eksport etmezden ozal, muny şu ýaly edeliň:

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

Talyplylar bar bolan programmaňyzy açyň, soňra studentsSlice.jsx faýlyny açyň, sapakda görkezilişi ýaly createSlice üçin reducer meýdanynyň bahasyny dolduryň.

studentsSlice.jsx faýlynyň ahyryna aýrylan hereket ýasayjy (action creator) funksiýasynyň eksportyny goşuň.