Abrufen der Verkäuferdaten in Redux

Lassen Sie uns unsere Anwendung mit den Produkten starten. Wir sehen, dass in den Produktkarten die Verkäufer nicht angezeigt werden. Lassen Sie uns diese vom Server abrufen und diese Daten anzeigen. Dazu müssen wir die bereits bekannte Abfolge von Aktionen durchführen.

Öffnen wir zunächst die Datei server.js. Finden Sie das Array handlers und fügen Sie ihm noch eine Verarbeitung für eine GET-Anfrage hinzu (nach der Verarbeitung von GET für Produkte). Wie Sie sehen, ist diese praktisch identisch:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

Wir haben die Anfrage an den Server verarbeitet. Im nächsten Schritt müssen wir in der Datei sellersSlice.js einen Thunk zum Abrufen der Daten vom Server schreiben. Dazu importieren wir client und createAsyncThunk:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

Jetzt holen wir die Verkäufer vom Server, daher entfernen wir sie aus initialState und lassen einfach leere Klammern übrig:

const initialState = []

Und dann erstellen wir vor der Funktion sellersSlice unseren Thunk fetchSellers. Dem Client übergeben wir den Pfad, den wir auf dem Server angegeben haben:

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

Jetzt müssen wir nur noch für sellersSlice einen zusätzlichen Reducer erstellen. Beschränken wir uns hier auf die Verarbeitung der erfolgreichen Anfrage. Alle Actions, die von fetchSellers generiert werden, sind identisch mit den Actions von fetchProducts:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

Ich erinnere daran, dass wir beim letzten Abruf der Produkte den aktuellen Zustandswert geändert haben. Hier sind wir einen etwas anderen Weg gegangen und haben einfach einen neuen Wert zurückgegeben, das geht auch in createSlice. Auf diese Weise haben wir zwei Ziele erreicht. Erstens haben wir die Daten erhalten, und zweitens haben wir jetzt die Garantie, dass in der Verkäuferliste nicht noch etwas anderes auftaucht, da wir den Slice vollständig mit dem Wert action.payload überschrieben haben.

Öffnen Sie Ihre Studentenanwendung. Öffnen Sie darin die Datei server.js, fügen Sie dem Array handlers einen weiteren Handler für die GET-Anfrage der Dozenten hinzu.

Öffnen Sie nun die Datei teachersSlice.js. Machen Sie initialState zu einem leeren Array, wie in der Lektion gezeigt. Schreiben Sie vor der Funktion studentsSlice den Thunk fetchTeachers.

Ergänzen Sie in der Funktion createSlice den zusätzlichen Reducer, beschränken Sie sich auf die Verarbeitung der erfolgreichen Anfrage.