Промяна на данни за продукт в Redux store

Научихме се да добавяме продукти, а какво ако искаме да променим информацията за продукта? Нека разгледаме как да го направим в този и следващите уроци.

Нека отворим нашето приложение с продукти и да отидем във файла productsSlice.js. Ще започнем с това, че за slice products трябва да напишем още един reducer, който ще се стартира при актуализиране на продукт. Ще го наречем productUpdated и ще го добавим в полето reducers след reducer productAdded. Също ще му подадем веднага параметрите state и action, на базата на които, както си спомняме, работи reducer:

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

Сега нека помислим, какви данни ще са ни необходими за актуализиране на продукта. Преди всичко - това е id, по него ще можем да намерим продукта, който ни интересува, в store. Останалите данни - име, описание, цена и количество ще бъдат за промяна. Всички тези стойности ще получим от свойството payload на обекта action, който ще ни дойде, и ако го пишем ръчно, той би изглеждал така, както е показано по-долу. Обърнете внимание, че очакваната стойност на свойството 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.