Измена података производа у 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.