Änderung der Redux-Statusstruktur

Die erste Phase, die wir implementieren werden für die Interaktion unserer Redux-Anwendung mit einem externen Server - ist das Abrufen von Daten, die auf ihm gespeichert sind, beim Start der Anwendung. Aber zuvor lassen Sie uns einige Änderungen in unsere Anwendung vornehmen.

Öffnen wir unsere Produktanwendung und darin die Datei productsSlice.js. Beachten Sie die Definition von initialState. Ursprünglich ist unser Slice mit Produkten productsSlice - ein Array, in dem sich Objekte (in unserem Fall zwei) mit Daten der Produkte befinden. Erstens, da wir sie nun vom Server laden werden, müssen wir sie aus dem initialState entfernen. Zweitens werden wir API-Anfragen an den Server senden und es wird für uns wichtig sein, deren Status zu kennen. Unter Berücksichtigung dieser beiden Dinge, lassen Sie uns initialState umbauen. Lass es jetzt einfach ein Objekt mit den Feldern products sein (zunächst werden hier keine Daten vorhanden sein, sondern nur ein leeres Array), status und error. Jetzt wird unser Code für initialState etwas kürzer:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Vorerst haben wir den Status auf 'idle' gesetzt (Untätigkeit), da wir anfänglich keine Anfragen senden, aber insgesamt wird er sich ändern und kann Werte wie 'loading', 'succeeded', 'failed' annehmen. Denken Sie daran, dass Sie für die Bezeichnung des Status die Namen wählen können, die für Sie bequem sind.

Gehen wir im Code weiter nach unten. Nach der Änderung des initialState sollten wir auch den Code ändern, in dem wir mit diesem Status in den Reducer-Funktionen arbeiten. Schauen wir uns den Code für productAdded an:

state.push(action.payload)

Jetzt werden wir neue Produkte nicht einfach in den state für Produkte ablegen, sondern in seine Eigenschaft state.products. Deshalb ersetzen wir die oben genannte Zeile durch:

state.products.push(action.payload)

Dementsprechend nehmen wir die gleichen Änderungen für den Reducer reactionClicked vor. Anstatt:

const currentProduct = state.find((product) => product.id === productId)

Jetzt wird es:

const currentProduct = state.products.find((product) => product.id === productId)

Ersetzen Sie selbst state durch state.products im Code des Reducers productUpdated.

Öffnen Sie Ihre Studentenanwendung. Öffnen Sie darin die Datei studentsSlice.js. Lassen Sie nun Ihren initialState drei Eigenschaften haben: students, status, error - bauen Sie ihn um, wie in der Lektion gezeigt.

Nehmen Sie die entsprechenden Änderungen auch weiter unten im Code vor. Ersetzen Sie state durch state.students im Code für Ihre drei Reducer-Funktionen.