Маълумоти маҳсулотро дар Redux store тағйир додан

Мо илова кардани маҳсулотро омӯхтем, агар мо хоҳем, ки маълумоти маҳсулотро тағйир диҳем? Биёед дида бароем, ки чӣ гуна ин корро дар ин ва дарсҳои оянда анҷом диҳем.

Барномаи мо бо маҳсулотро кушода, ба файли productsSlice.js меравем. Оғоз мекунем аз он, ки барои слайси products як редьюсери дигар навиштан лозим аст, ки вақти навсозии маҳсулот оғоз мешавад. Онро 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 редьюсери дигареро барои productsSlice илова нависед, ки маълумоти донишҷӯро дар store нав мекунад, агар корбар онҳоро тағйир диҳад. Онро studentUpdated номгузорӣ кунед.

Ва дар ин ҳолат объекти action-и шумо чӣ намуд хоҳад дошт? Коди онро дар ҷавоб бифиристед.

Дар охири файл action creator-и гирифташудаи studentUpdated-ро экспорт кунед.