Redux storedagi mahsulot ma'lumotlarini o'zgartirish

Biz mahsulot qo'shishni o'rgandik, lekin agar biz mahsulot haqidagi ma'lumotni o'zgartirmoqchi bo'lsak-chi? Keling, buni qanday amalga oshirishni ushbu va keyingi darslarda ko'rib chiqaylik.

Mahsulotlar ilovamizni ochamiz va productsSlice.js fayliga kiramiz. Keling, products slaysi uchun yana bir reducer yozishdan boshlaymiz, u mahsulot yangilanganda ishga tushadi. Uni productUpdated deb nomlaymiz va maydonga productAdded reduceridan keyin reducers qo'shamiz. Shuningdek, unga darhol state va action parametrlarini uzatamiz, ular asosida, esimizda, reducer ishlaydi:

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

Keling, mahsulotni yangilash uchun qanday ma'lumotlar kerak bo'lishini o'ylab ko'raylik. Avvalo - bu id, uning yordamida biz store ichidagi qiziqarli mahsulotni topa olamiz. Qolgan ma'lumotlar - nom, tavsif, narx va miqdor o'zgartirish uchun bizda bo'ladi. Bu qiymatlarning barchasini biz action ob'ektining payload xususiyatidan olamiz, u bizga keladi va, agar biz uni qo'lda yozayotgan bo'lsak, u quyida ko'rsatilgandek ko'rinadi. E'tibor bering, payload xususiyatining kutilayotgan qiymati - bitta argument, shuning uchun biz bu erga ob'ekt uzatamiz (bu haqda keyinroq gaplashamiz):

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

Asosiy nuqtalarni aniqlagandan so'ng, endi biz jingalak qavslar ichida kod yozishimiz mumkin productUpdated uchun. Avval action ob'ektidan o'zgartirilgan ma'lumotlarni olamiz:

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

Endi biz olingan id bo'yicha topamiz o'zgartirilishi kerak bo'lgan mahsulotni:

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

Agar bunday mahsulot storeda topilsa, unda biz uning ma'lumotlarini yangi qiymatlar bilan almashtiramiz:

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
	}
},

Biz uchun faqat action creatorni eksport qilish qoladi komponentda foydalanish uchun, uni biz uchun createSlice yaratadi. Keling, uni fayl oxiridagi eksportga qo'shamiz, mavjud productAdded bilan bir qatorda:

export const { productAdded, productUpdated } = productsSlice.actions

Talabalar ilovangizni oching. Dars materialini o'rganganingizdan so'ng, studentsSlice.js faylida productsSlice uchun yana bir reducer yozing, u talaba ma'lumotlarini storeda yangilaydi foydalanuvchi tomonidan o'zgartirilgan taqdirda. Uni studentUpdated deb nomlang.

Bunday holda sizning action ob'ektingiz qanday ko'rinardi? Javobingizda uning kodini yuboring.

Fayl oxirida olingan action creator studentUpdated ni eksport qiling.