Изменение данных продукта в Redux store

Мы научились добавлять продукты, а что если мы захотим изменить информацию о продукте? Давайте рассмотрим как это сделать в этом и последующих уроках.

Откроем наше приложение с продуктами и зайдем в файл productsSlice.js. Начнем с того, что нам нужно для слайса products написать еще один reducer, который будет запускаться при обновлении продукта. Назовем его productUpdated и добавим в поле reducers после редьюсера productAdded. Также передадим ему сразу параметрами state и action, на основе которых, как мы помним, работает редьюсер:

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.