Redux storeдаги маҳсулот маълумотларини ўзгартириш

Биз маҳсулотларни қўшишни ўргандик, агар биз маҳсулот ҳақидаги маълумотни ўзгартирмоқчи бўлсак нима қилишимиз керак? Келинг, бу ва кейинги дарсларда буни қандай қилишни кўриб чиқайлик.

Маҳсулотлар дастуримизни очайлик ва productsSlice.js файлини ochaylik. Keling, products слайси учун яна битта reducer ёзишдан бошлаймиз, у маҳсулот янгиланганда ишга тушади. Уни productUpdated деб атаймиз ва maydonга қўшамиз reducers reducerдан кейин productAdded. Шунингдек, унга дарҳол state ва параметрларни ўтказамиз action, улар asosida, биз eslaymiz, reducer ишлайди:

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

Энди келинг, ўйлайлик, қандай маълумотлар бизга керек бўлади маҳсулотни янгилаш учун. Аввало - бу id, унинг ёрдамида биз topishimiz мумкин бизни қизиктирган маҳсулотни storeда. Қолган маълумотлар - ном, tavsif, narx ва miqdor ўзгартириш учун бўлади. Барча қийматлар биз action объектининг payload хусусиятидан olamiz, у бизга келади, ва, агар биз уни ёзган бўлсак қўл bilan, у quyidagicha кўринар эди, кўрсатилгандей пастга. Эътибоring, кутілган қиймат payload хусусияти - битта аргумент, шунинг учун биз бу ерга объект узатамиз (бу ҳақида биз gaplashamiz keyinroq):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Асосий нуқталарни аниклаб, энди биз жамланган qavs ichida кодни ёза оламиз productUpdated. Аввало olamiz action объектидан ўзгартирилган маълумотларни:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Энди биз олинган id бўйича маҳсулотни topamiz, уни ўзгартириш керак:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Агар бундай маҳсулот storeda топилган бўлса, у ҳолда биз унинг маълумотларини янги қийматлар билан алмаштирамиз:

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 creatorni eksport qilish қолади компонентада ишлатиш учун, у createSlice биз учун яратади. Келинг, уни файл oxirida eksportga қўшайлик, mavjud productAdded билан бирга:

export const { productAdded, productUpdated } = productsSlice.actions

Ўқувчилар билан дастурингизни oching. Дарс маводини ўрганиб, studentsSlice.js файлида productsSlice учун яна битта reducer ёзинг, у ўқувчи маълумотларини янгилайди storeda агар улар фойдаланувчи томонидан ўзгартирилган бўлса. Уни studentUpdated деб атанг.

Бу ҳолда сизнинг action объектингиз қандай кўринар эди? Унинг кодини жавоб сифатида юборинг.

Файл oxirida олинган action creatorni eksport qiling studentUpdated.