Redux store'догу продукттун маалыматтарын өзгөртүү

Биз продукттарды кошуду үйрөндүк, бирок продукт жөнүндөгү маалыматты өзгөрткүбүз келсе? Бул жана кийинки сабактарда муну кантип жасаганыбызды карап көрөлү.

Продукттар колдонмобузду ачып, productsSlice.js файлына кирейли. Баштапкы кылып, бизге products слайси үчүн дагы бир reducer жазышыбыз керек, ал продукт жаңыртылганда ишке кирет. Аны productUpdated деп атап, талаага reducers редьюсерден кийин кошобуз. Ошондой эле ага параметр катары state жана action беребиз, алардын негизинде, эсибизде болгондой, редьюсер иштейт:

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

Эми продуктту жаңыртуу үчүн кандай маалымат керек экенин ойлонолу. Биринчиден - бул id, анын жардамы менен биз store'догу бизди кызыктырган продуктту таба алабыз. Калган маалыматтар - аталышы, сүрөттөлүшү, баасы жана саны биз үчүн өзгөртүлөт. Бул баалуулуктардын баарын биз action объектисинин payload касиетинен алабыз, ал бизге келет, эгер аны кол менен жазсақ, анда ал төмөндө көрсөтүлгөндөй көрүнөт. Сын- 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 үчүн дагы бир reducer жазыңыз, ал колдонуучу тарабынан өзгөртүлгөн учурда окуучунун маалыматын store'до жаңыртат. Аны studentUpdated деп атаңыз.

Бул учурда сиздин action объектиңиз кандай болмок? Анын коду менен жооп бериңиз.

Файлдын аягында алынган action creator'ду studentUpdated экспорттоңуз.