Einführung in Thunks in Redux

Im vorherigen Kapitel haben wir die Zusammenarbeit von Server, Datenbank und Client für den Daten austausch organisiert. Jetzt müssen wir noch die letzte Brücke schlagen, die unserer 'synchron' organisierten Redux-Anwendung hilft, mit dem asynchronen Client zu interagieren, den wir in der letzten Lektion des vorherigen Kapitels erstellt haben, um Anfragen zu senden und die notwendigen Daten in der Antwort zu erhalten.

Wie wir uns aus den ersten Lektionen des vorherigen Abschnitts erinnern, weiß Redux nichts über die Arbeit mit asynchroner Logik, und dafür werden wir die Thunk-Middleware verwenden. Diese Middleware ermöglicht es, mit gesendeten Actions zu arbeiten, die dispatch- und getState-Methoden des Stores in unserem Thunk-Code zu verwenden sowie der dispatch-Methode zu helfen, nicht nur mit normalen JS-Objekten, sondern auch mit Entitäten wie Funktionen und Promises zu arbeiten.

Normalerweise wird eine Thunk-Funktion mit zwei Argumenten dispatch und getState (bei Bedarf) aufgerufen, die im Körper dieser Funktion verwendet werden können. Mit ihr können normale Actions gesendet werden. Sie kann auch über store.dispatch gesendet werden. Ein Beispiel für eine solche Funktion ist unten aufgeführt:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Alte Farbe: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Neue Farbe: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Öffnen wir nun unsere Produktanwendung. Das Erste, was wir beim Starten der Anwendung vom Server erhalten müssen, ist die Produktliste. Da Thunks normalerweise in Slice-Dateien geschrieben werden, öffnen wir die Datei productsSlice.js.

Die erfreuliche Nachricht ist, dass wir uns nicht mit der Installation von Redux Thunk herumschlagen müssen, da die Funktion configureStore aus RTK das bereits für uns erledigt. Also fügen wir einfach createAsyncThunk zum Import in der Datei hinzu:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Fügen wir auch unseren Client zum Import hinzu:

import { client } from '../../api/client'

Und nun erstellen wir mit createAsyncThunk unseren ersten Thunk zum Abrufen der Produkte. Wir tun dies direkt nach der Deklaration des initialState-Objekts:

export const fetchProducts = createAsyncThunk()

Der erste Parameter von createAsyncThunk ist ein String für den Typ der generierten Action, der zweite ist eine Callback-Funktion für die payload, die entweder Daten oder einen Promise mit einem Fehler zurückgibt (siehe Datei client.js). Im Funktionscode rufen wir client.get auf und übergeben ihm den Pfad, den wir auf dem Server angegeben haben (überprüfen Sie die akzeptierten Parameter von http.get in server.js):

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

Öffnen Sie Ihre Studenten-Anwendung. Öffnen Sie darin die Datei studentsSlice.js. Importieren Sie darin die Funktion createAsyncThunk zum Erstellen eines Thunks sowie client zum Senden von API-Anfragen an den Server.

Direkt nach der Deklaration des initialState-Objekts erstellen Sie mit createAsyncThunk den Thunk fetchStudents zum Abrufen der Studentenliste, der eine GET-Anfrage an die Adresse /fakeServer/students sendet, die in Ihrer Datei server.js angegeben ist, und response.data zurückgibt, wie in den Unterrichtsmaterialien gezeigt. Geben Sie als ersten Parameter für createAsyncThunk den String students/fetchStudents für den Action-Typ an.