Vorbereitung der Daten für ein Action-Objekt in Redux

Wir haben kürzlich darüber gesprochen, dass die Funktion createSlice ein Argument bei der Erstellung von action.payload erwartet. Einerseits vereinfacht dies ihre Verwendung, andererseits kann es zusätzliche Schritte zur Vorbereitung des Inhalts des Action-Objekts erfordern.

Öffnen wir unsere Produktanwendung und darin die Datei NewProductForm.jsx. Achten Sie auf die folgende Codezeile:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Hier bauen wir das payload-Objekt direkt in der React-Komponente zusammen und übergeben es an die Action productAdded. Was aber, wenn wir dieselbe Action aus mehreren Komponenten senden müssen oder die Logik zum Zusammenbau komplex wird? Im Prinzip sollte es unserer Komponente egal sein, wie das Objekt in payload für diese Action aussieht. Außerdem sind wir mit der ständigen Code-Duplikation nicht zufrieden.

Diese Probleme kann uns wiederum unser berühmter createSlice helfen zu lösen, da er uns beim Schreiben eines Reducers erlaubt, eine Callback-Funktion prepare zu verwenden, in der wir verschiedene Logik schreiben, Zufallszahlen generieren und mehr können. In einem solchen Fall kann der Wert für das Reducer-Feld als folgendes Objekt dargestellt werden:

{reducer, prepare}

Öffnen wir unsere Datei productsSlice.js und ändern den Code für den Reducer productAdded. Jetzt wird dieses Code-Stück:

productAdded(state, action) {
	state.push(action.payload)
},

Wir ändern es in das Folgende, wobei die Funktion reducer sich um die Aktualisierung des States im Store kümmert, und prepare - das payload-Objekt mit der generierten id und unseren anderen Daten zurückgibt:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Da wir nun die id hier generieren werden, und nicht in der Komponente, fügen wir nanoid zum Import hinzu:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Zum Schluss nehmen wir Änderungen in NewProductForm.jsx vor. Anstelle der Zeile:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Haben wir diese, in der wir einfach durch Kommas getrennt die benötigten Daten übergeben (vergessen Sie nicht, in dieser Datei nanoid aus dem Import zu entfernen):

dispatch(productAdded(name, desc, price, amount))

Starten wir die Anwendung, erstellen dann ein neues Produkt und stellen Sie sicher, dass wir nichts kaputt gemacht haben.

Öffnen Sie Ihre Studenten-Anwendung. Schreiben Sie in der Datei StudentsSlice.js Ihren Reducer studentAdded so um, dass er in Form eines Objekts {reducer, prepare} vorliegt, wie in der Lektion gezeigt.

Nehmen Sie die entsprechenden Änderungen in der Datei NewStudentForm.jsx vor, wie in der Lektion gezeigt. Starten Sie die Anwendung und stellen Sie sicher, dass alles wie zuvor funktioniert.