Промена на податоците за производот во 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

Отворете ја вашата апликација со студенти. Проучувајќи го материјалот од лекцијата, во датотеката studentsSlice.js допишете уште еден reducer за productsSlice, кој ќе ги ажурира податоците за студентот во store во случај тие да се променат од корисникот. Наречете го studentUpdated.

А како би изгледал во овој случај вашиот објект action? Испратете го неговиот код во одговорот.

На крајот од датотеката експортирајте го добиениот action creator studentUpdated.