Reducer und Action in Redux

In der letzten Lektion haben wir das Formular zum Hinzufügen eines Produkts fertiggestellt und es auf der Hauptseite angezeigt. Aber die hinzugefügten Daten werden bisher nicht gespeichert, mit anderen Worten, das neue Produkt wird nicht zu den bestehenden im Store hinzugefügt. Lassen Sie uns das beheben.

Zunächst öffnen wir in unserer Produktanwendung die Datei productsSlice.jsx und schreiben in der Eigenschaft reducer für createSlice die Funktion productAdded, die sich um das Hinzufügen des Produkts zum Store basierend auf dem übergebenen aktuellen State und Action kümmern wird. Es ist wichtig zu beachten, dass hier nicht der gesamte State übergeben wird, sondern nur der Teil, der für die Produkte zuständig ist (der Slice products kennt nur diesen). Das Objekt mit dem neuen Produkt befindet sich in der Eigenschaft payload des Objekts action, das vom Event-Handler beim Klicken der Speichern-Schaltfläche im Formular generiert wird. Als Ergebnis wird der Reducer productAdded in createSlice so aussehen:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Und was ist mit der Action? Ganz am Anfang des Tutorials haben wir erwähnt, dass eine Action ein Ereignis ist, dargestellt als Objekt, das beschreibt, was in der Anwendung passiert ist. Wir haben auch darüber gesprochen, dass man eine Action Creator-Funktion verwenden kann, die ein solches Objekt für uns erstellt, zum Beispiel so:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Die gute Nachricht ist, dass wir nichts tun müssen, denn die Funktion createSlice, die wir verwenden, erledigt das für uns. Sobald wir einen Reducer geschrieben haben, erstellt sie automatisch einen Action Creator mit demselben Namen für uns. Wir müssen nur noch den resultierenden Action Creator exportieren, um ihn weiter in Komponenten verwenden zu können. Machen wir das am Ende der Datei vor dem Export des Reducers, und zwar so:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Öffnen Sie Ihre Studenten-Anwendung, und dann die Datei studentsSlice.jsx, ergänzen Sie den Wert des Feldes reducer für createSlice, wie in der Lektion gezeigt.

Fügen Sie am Ende der Datei studentsSlice.jsx den Export der erhaltenen Action Creator-Funktion hinzu.