Reducer in Redux

In der letzten Lektion haben wir mit der Funktion createSlice einen Slice für Produkte products und einen Reducer erstellt, der diesen im Store gespeicherten Slice aktualisiert. Ich erinnere noch einmal daran, dass in Redux Daten des States über Reducer geändert werden.

Man muss beachten, dass für Reducer eine Reihe von Einschränkungen gelten. Ein Reducer aktualisiert den Zustand nur auf der Grundlage der erhaltenen Werte des aktuellen States und des action-Objekts und entscheidet dann, wie der State geändert werden soll, und gibt seinen neuen Wert zurück.

Wir wissen, dass Objekte und Arrays in JavaScript standardmäßig mutable (veränderbar) sind. Wir wissen auch, dass der State nicht direkt verändert werden darf, in diesem Fall sollte man nur mit Kopien arbeiten. Diese Regel muss auch der Reducer befolgen. Das manuelle Schreiben einer solchen Logik kann jedoch ziemlich mühsam und komplex sein, und hier kommt die Funktion createSlice zur Hilfe, die die Bibliothek Immer verwendet, um Ihren 'mutablen' Code in 'immutablen' Code umzuwandeln. Somit kann man sich nur bei der Verwendung der Funktionen createSlice oder createReducer "Sünden" erlauben und sich das Leben erleichtern.

Zu den Einschränkungen eines Reducers gehören auch die Verwendung asynchroner Logik, die Berechnung zufälliger Werte und die Ausführung anderer "Seiteneffekte". Und jetzt, nachdem wir den Reducer näher kennengelernt haben, kehren wir zu unserer Produkt-Anwendung zurück.

In unserer Anwendung gibt es einen Store, den wir in den vorherigen Lektionen erstellt haben, aber bisher ist nichts darin. Lassen Sie uns unsere Datei store.js öffnen und etwas Code hinzufügen. Importieren wir zunächst die Reducer-Funktion für Produkte:

import productsReducer from '../parts/products/productsSlice'

Jetzt können wir die importierte Funktion productsReducer als Reducer angeben:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Mit der obigen Zeile teilen wir unserem Store mit, dass nun bei Auftreten einer Action alle Daten für den Slice state.products durch den Reducer productsReducer aktualisiert werden.

Sie können nun die Anwendung starten (beachten Sie, dass die Warnung über einen ungültigen Reducer in der Konsole verschwunden ist!), die Redux DevTools im Browser öffnen und durch deren Tabs navigieren. Zum Beispiel können wir, wenn wir auf den Tab State im Tab Inspector klicken, unsere beiden Produktobjekte sehen, die als Anfangswert des States beim ersten Start der Anwendung ausgegeben wurden. Auf dem Tab Log monitor sehen wir, welche Slices der globale State enthält - nämlich den Slice products, der zwei Objekte enthält. Schauen Sie sich auch den Tab Chart an.

Öffnen Sie Ihre Studenten-Anwendung und ändern Sie den Code der Datei store.js, wie in der Lektion gezeigt.

Starten Sie Ihre Anwendung im Browser und navigieren Sie durch die Tabs der Redux DevTools-Erweiterung.