Ändern von Produktdaten im Redux Store

Wir haben gelernt, wie man Produkte hinzufügt, aber was, wenn wir die Informationen zu einem Produkt ändern möchten? Schauen wir uns in dieser und den folgenden Lektionen an, wie das geht.

Öffnen wir unsere Produktanwendung und gehen wir zur Datei productsSlice.js. Wir beginnen damit, dass wir für den Slice products einen weiteren Reducer schreiben müssen, der bei der Aktualisierung eines Produkts ausgeführt wird. Nennen wir ihn productUpdated und fügen ihn im Feld reducers nach dem Reducer productAdded hinzu. Wir übergeben ihm sofort die Parameter state und action, auf deren Basis, wie wir uns erinnern, der Reducer funktioniert:

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

Überlegen wir uns nun, welche Daten wir für die Aktualisierung des Produkts benötigen. In erster Linie - die id, anhand derer wir das gewünschte Produkt im Store finden können. Die restlichen Daten - Name, Beschreibung, Preis und Menge stehen uns zur Änderung zur Verfügung. Alle diese Werte erhalten wir aus der Eigenschaft payload des Action-Objekts, das bei uns eingeht, und wenn wir es von Hand schreiben würden, würde es so aussehen, wie unten gezeigt. Beachten Sie, dass der erwartete Wert der Eigenschaft payload ein Argument ist, daher werden wir hier ein Objekt übergeben (darüber sprechen wir später):

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

Nachdem die wichtigsten Punkte geklärt sind, können wir nun in den geschweiften Klammern den Code für productUpdated schreiben. Zuerst holen wir die geänderten Daten aus dem Objekt action:

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

Nun finden wir anhand der erhaltenen id das Produkt, das geändert werden muss:

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

Wenn ein solches Produkt im Store gefunden wurde, ersetzen wir seine Daten durch die neuen Werte:

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

Es bleibt uns nur noch, den Action Creator für die Verwendung in der Komponente zu exportieren, den createSlice bereitwillig für uns erstellt. Fügen wir ihn am Ende der Datei zum Export hinzu, zusammen mit dem vorhandenen productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Öffnen Sie Ihre Studenten-Anwendung. Nachdem Sie den Stoff der Lektion durchgearbeitet haben, schreiben Sie in der Datei studentsSlice.js einen weiteren Reducer für productsSlice hinzu, der die Studentendaten im Store aktualisiert, falls sie vom Benutzer geändert werden. Nennen Sie ihn studentUpdated.

Und wie würde in diesem Fall Ihr Action-Objekt aussehen? Senden Sie seinen Code in der Antwort.

Exportieren Sie am Ende der Datei den erhaltenen Action Creator studentUpdated.