Redux store-дегі өнім деректерін өзгерту

Біз өнімдерді қосуға үйрендік, бірақ егер біз өнім туралы ақпаратты өзгерткіміз келсе ше? Мұны қалай жасауға болатынын осы және келесі сабақтарда қарастырайық.

Өнімдер қолданбасын ашып, productsSlice.js файлына кірейік. products слайсы үшін бізге өнімді жаңарту кезінде іске қосылатын тағы бір reducer жазуды бастайық. Оны productUpdated деп атап, productAdded редьюсерінен кейін reducers өрісіне қосамыз. Сондай-ақ оған бірден state және action параметрлерін береміз, олардың негізінде, есімізде болғандай, редьюсер жұмыс істейді:

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 файлында productsSlice үшін пайдаланушы өзгерткен жағдайда store-дағы студент деректерін жаңартатын тағы бір reducer жазбыласы. Оны studentUpdated деп атаңыз.

Бұл жағдайда сіздің action объектіңіз қалай көрінер еді? Оның кодін жауапта жіберіңіз.

Файл соңында алынған studentUpdated action creator-ін экспорттаңыз.