Redux store-ում արտադրանքի տվյալների փոփոխում

Մենք սովորեցինք ավելացնել արտադրանքը, բայց ինչ եթե ցանկանանք փոխել տեղեկատվությունը արտադրանքի մասին: Եկեք դիտարկենք, թե ինչպես դա անել այս և հաջորդ դասերին:

Բացենք մեր արտադրանքի հավելվածը և մտնենք productsSlice.js ֆայլը: Սկսենք այն բանից, որ մեզ անհրաժեշտ է products սլայսի համար գրել ևս մեկ reducer, որը կգործարկվի արտադրանքի թարմացման ժամանակ: Անվանենք այն productUpdated և ավելացնենք դաշտում reducers՝ productAdded reducer-ից հետո: Նաև անմիջապես փոխանցենք դրան պարամետրերով state և action, որոնց հիման վրա, ինչպես հիշում ենք, աշխատում է reducer-ը:

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

Հիմա եկեք մտածենք, թե ինչ տվյալներ են մեզ անհրաժեշտ արտադրանքը թարմացնելու համար: Նախ և առաջ - դա id-ն է, դրա միջոցով մենք կկարողանանք գտնել մեզ հետաքրքրող արտադրանքը store-ում: Մնացած տվյալները - անվանումը, նկարագրությունը, գինը և քանակը կլինեն մեզ համար փոփոխման համար: Այս բոլոր արժեքները մենք կստանանք action օբյեկտի payload հատկությունից, որը կգա մեզ մոտ, և, եթե մենք գրեինք այն ձեռքով, ապա այն կունենա այնպիսի տեսք, ինչպես ցույց է տրված ստորև: Նկատեք, որ սպասվող արժեքը payload հատկության - մեկ արգումենտ է, այնպես որ մենք այստեղ կփոխանցենք օբյեկտ (այս մասին մենք կխոսենք հետագայում):

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

Պարզաբանելով հիմնական կետերը, այժմ մենք կարող ենք գրել ֆիգուրային փակագծերում կոդ productUpdated-ի համար: Նախ ստացենք action օբյեկտից փոփոխված տվյալները:

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

Այժմ մենք կգտնենք ստացված id-ի հիման վրա այն արտադրանքը, որը պետք է փոխել:

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

Եթե այդպիսի արտադրանք գտնվեց store-ում, ապա մենք կփոխարինենք դրա տվյալները նոր արժեքներով:

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
	}
},

Մեզ մնում է միայն էքսպորտել action creator-ը՝ օգտագործելու համար կոմպոնենտում, որը սիրալիր կստեղծի մեզ համար createSlice-ը: Եկեք ավելացնենք այն ֆայլի վերջում գտնվող էքսպորտին, գոյություն ունեցող productAdded-ի կողքին:

export const { productAdded, productUpdated } = productsSlice.actions

Բացեք ձեր ուսանողների հավելվածը: Ուսումնասիրելով դասի նյութը, studentsSlice.js ֆայլում գրեք ևս մեկ reducer productsSlice-ի համար, որը կթարմացնի ուսանողի տվյալները store-ում, եթե դրանք փոխվել են օգտատիրոջ կողմից: Անվանեք այն studentUpdated:

Իսկ ինչպե՞ս կերևար այս դեպքում ձեր action օբյեկտը: Ուղարկեք դրա կոդը պատասխանում:

Ֆայլի վերջում էքսպորտեք ստացված action creator studentUpdated-ը: