Senden von Daten mit Thunk in Redux

In der letzten Lektion haben wir die Behandlung einer POST-Anfrage auf unserem Fake-Server besprochen. Lasst uns jetzt eine Thunk-Funktion schreiben, die die Anfrage an den Server sendet.

Wir öffnen unsere Produktanwendung und darin die Datei productsSlice.js. Jetzt werden wir nach dem Thunk fetchProducts mit Hilfe von createAsyncThunk einen Thunk addProduct erstellen:

export const addProduct = createAsyncThunk()

Als ersten Parameter übergeben wir an createAsyncThunk 'products/addProduct', und als zweiten einen asynchronen Callback, der ein Objekt mit den Daten des neuen Produkts entgegennimmt:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

Im Code dieses Callbacks rufen wir den Client auf, übergeben ihm als Parameter den Pfad und das Objekt mit dem Produkt, und geben dann die Antwortdaten zurück:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

Schauen wir uns nun weiter unten im Code das Feld reducers für productsSlice an. Früher haben wir ein neues Produkt mit dem Reducer productAdded hinzugefügt, in dem wir die Methoden reducer und prepare hatten. Jetzt generieren wir die erforderlichen Daten auf dem Server und arbeiten mit Thunk, daher entfernen wir hier vollständig den Reducer productAdded aus dem Code. Und dann fügen wir am Ende seines Codes in die Methode extraReducers einen weiteren zusätzlichen Reducer hinzu, der im Falle einer erfolgreichen Anfrage den Slice products um ein neues Produkt direkt aus der payload der Action erweitert (wir erinnern uns, dass solcher Code nur dank des einzigartigen createSlice möglich ist):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Ja, übrigens, vergessen Sie nicht, nanoid aus den Importzeilen zu entfernen, und productAdded aus dem Export der Actions am Ende der Datei.

Öffnen Sie Ihre Studentenanwendung. Öffnen Sie darin die Datei studentsSlice.js. Erstellen Sie mit Hilfe von createAsyncThunk einen weiteren Thunk addStudent, der eine POST-Anfrage an den Server sendet, um einen neuen Studenten hinzuzufügen, wie in der Lektion gezeigt.

Nehmen Sie anschließend unten Änderungen für studentsSlice vor: Entfernen Sie vollständig den Reducer studentAdded in der Eigenschaft reducers. Und fügen Sie im Feld extraReducers einen zusätzlichen Reducer hinzu, der im Falle einer erfolgreichen Anfrage einen neuen Studenten in den Slice students aus der payload der Action hinzufügt, wie in der Lektion gezeigt.