Modificarea datelor produsului în Redux store

Am învățat să adăugăm produse, dar ce dacă vom dori să modificăm informația despre produs? Să vedem cum putem face acest lucru în această și în lecțiile următoare.

Deschideți aplicația noastră cu produse și accesați fișierul productsSlice.js. Vom începe cu faptul că pentru slice-ul products trebuie să scriem încă un reducer, care va fi executat la actualizarea produsului. Să-l numim productUpdated și să-l adăugăm în câmpul reducers după reducer-ul productAdded. De asemenea, să-i transmitem imediat parametrii state și action, pe baza cărora, după cum ne amintim, funcționează reducer-ul:

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

Acum să ne gândim ce date vom nevoi pentru a actualiza produsul. În primul rând - acesta este id, după el vom putea găsi produsul care ne interesează în store. Restul datelor - numele, descrierea, prețul și cantitatea vor fi pentru modificare. Toate aceste valori le vom obține din proprietatea payload a obiectului action, care ne va veni, și, dacă l-am scrie de mână, atunci ar arăta așa cum este arătat mai jos. Observați că valoarea așteptată a proprietății payload - este un singur argument, deci vom transmite aici un obiect (despre asta vom vorbi în continuare):

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

După ce am clarificat aspectele principale, acum putem scrie în acolade codul pentru productUpdated. Mai întâi să obținem din obiectul action datele modificate:

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

Acum vom găsi după id-ul obținut produsul, care trebuie modificat:

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

Dacă un astfel de produs a fost găsit în store, atunci vom înlocui datele lui cu noile valori:

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

Ne rămâne doar să exportăm action creator-ul pentru utilizare în componentă, pe care createSlice ni-l va crea cu amabilitate. Să-l adăugăm la export la sfârșitul fișierului, alături de productAdded-ul existent:

export const { productAdded, productUpdated } = productsSlice.actions

Deschideți aplicația voastră cu studenții. După ce ați studiat materialul lecției, în fișierul studentsSlice.js completați încă un reducer pentru productsSlice, care va actualiza datele studentului în store în cazul modificării lor de către utilizator. Numiți-l studentUpdated.

Și cum ar arăta în acest caz obiectul dvs. action? Trimiteți codul lui în răspuns.

La sfârșitul fișierului exportați action creator-ul obținut studentUpdated.