Redux store-da məhsul məlumatlarının dəyişdirilməsi

Biz məhsul əlavə etməyi öyrəndik, bəs məhsul haqqında məlumatı dəyişmək istəsək necə? Gəlin bu və sonrakı dərslərdə bunun necə ediləcəyini nəzərdən keçirək.

Məhsullarla olan tətbiqimizi açaq və productsSlice.js faylına keçək. Gəlin products dilimi üçün məhsul yeniləndikdə işə düşəcək başqa bir reducer yazmağa ehtiyacımız olduğundan başlayaq. Ona productUpdated adını verək və reducers sahəsinə productAdded reducerindən sonra əlavə edək. Həmçinin dərhal ona parametrlər kimi state və action ötürək, xatırladığımız kimi, reducer bunlar əsasında işləyir:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

İndi gəlin düşünək, məhsulu yeniləmək üçün bizə hansı məlumatlar lazımdır. Əvvəla - bu iddir, onun vasitəsilə biz store-da bizi maraqlandıran məhsulu tapa biləcəyik. Qalan məlumatlar - ad, təsvir, qiymət və miqdar dəyişiklik üçün bizdə olacaq. Bütün bu dəyərləri bizə gələcək olan action obyektinin payload xassəsindən alacağıq və əgər onu əl ilə yazsaydıq, onda o aşağıda göstərildiyi kimi görünərdi. Qeyd edin ki, payload xassəsinin gözlənilən dəyəri - bir arqumentdir, ona görə də biz bura obyekt ötürəcəyik (bu barədə sonra danışacağıq):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Əsas məqamları aşkar etdikdən sonra, indi biz productUpdated üçün kod yaza bilərik. Əvvəlcə action obyektindən dəyişdirilmiş məlumatları əldə edək:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

İndi biz əldə edilmiş id-yə görə dəyişdirilməsi lazım olan məhsulu tapacağıq:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Əgər belə bir məhsul storeda tapılsa, onda biz onun məlumatlarını yeni dəyərlərlə əvəz edəcəyik:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Bizə yalnız komponentdə istifadə üçün action creatoru ixrac etmək qalır, ki bunu da bizim üçün createSlice xoşluqla yaradacaq. Gəlin onu faylın sonunda mövcud olan productAdded ilə birlikdə ixraca əlavə edək:

export const { productAdded, productUpdated } = productsSlice.actions

Tələbələrlə olan tətbiqinizi açın. Dərsin materialını öyrənərək, studentsSlice.js faylında productsSlice üçün storeda tələbə məlumatlarını istifadəçi tərəfindən dəyişildikdə yeniləyən başqa bir reducer əlavə edin. Ona studentUpdated adını verin.

Bəs bu halda sizin action obyektiniz necə görünərdi? Onun kodunu cavabınızda göndərin.

Faylın sonunda əldə edilən action creator studentUpdated-i ixrac edin.