Змяненне дадзеных прадукту ў 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

Адчынiце ваша прыкладанне са студэнтамі. Вывучыўшы матэрыял урока, у файле studentsSlice.js дапішыце яшчэ адзін reducer для productsSlice, які будзе абнаўляць дадзеныя студэнта ў store у выпадку іх змянення карыстальнікам. Назвіце яго studentUpdated.

А як бы выглядаў у гэтым выпадку ваш аб'ект action? Даслеце яго код у адказе.

У канцы файла экспартуйце атрыманы action creator studentUpdated.