Reduksdə Reduser və action

Keçən dərsdə biz məhsul əlavə etmək üçün forması bitirdik və onu əsas səhifədə göstərdik. Amma hələ ki, əlavə edilmiş məlumatlar saxlanılmır, başqa sözlə yeni məhsul mövcud olan store-a əlavə edilmir. Gəlin bunu düzəldək.

Əvvəlcə məhsullarla bağlı proqramımızda biz productsSlice.jsx faylını açaq və createSlice üçün reducer xassəsində productAdded funksiyasını yazaq, hansı ki, ötrülmüş cari state və action əsasında məhsulu store-a əlavə etməklə məşğul olacaq. Qeyd etmək lazımdır ki, burada bizə bütün state deyil, yalnız onun məhsullara cavabdeh olan hissəsi ötürülür (products slice yalnız onu bilir). Yeni məhsul olan obyekt action obyektinin payload xassəsində olacaq, hansı ki, formada saxla düyməsi basıldıqda handler tərəfindən yaradılacaq. Nəticədə productAdded reduseri createSlice kodunda belə görünəcək:

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

Bəs action necə? Dərsliyin əvvəlində biz qeyd etdik ki, action - bu proqramda baş verəni təsvir edən, obyekt şəklində təqdim olunan müəyyən bir hadisədir. Biz həm də danışdıq ki, action creator funksiyasından istifadə etmək olar, hansı ki, bizim üçün belə bir obyekt yaradacaq, məsələn belə:

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

Xoş xəbər odur ki, bizim heç nə etməyimizə ehtiyac yoxdur, və bunu bizim istifadə etdiyimiz createSlice funksiyası bizim üçün edəcək. Biz reducer yazan kimi, o avtomatik olaraq eyni adla bizim üçün action creator yaradacaq. Bizə yalnız alınan action creator-i komponentlərdə sonrakı tətbiq üçün export etmək qalır. Gəlin bunu faylın sonunda reduseri export etməzdən əvvəl edək, belə:

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

Tələbələrlə bağlı proqramınızı açın, sonra studentsSlice.jsx faylını açın, createSlice üçün reducer sahəsinin dəyərini dərsdə göstərildiyi kimi əlavə edin.

studentsSlice.jsx faylının sonuna alınmış action creator funksiyasının exportunu əlavə edin.