Introduktion til thunks i Redux

I det forrige kapitel organiserede vi arbejdet med server, database og klient til datudveksling. Nu er vi nødt til at etablere den sidste forbindelse, som vil hjælpe vores 'synkront' organiserede Redux applikation med at interagere med den asynkrone klient, som vi oprettede i den sidste lektie i forrige kapitel, for at sende forespørgsler og modtage de nødvendige data som svar.

Som vi husker fra de første lektioner i det forrige afsnit, ved Redux intet om at håndtere asynkron logik, og til dette vil vi bruge thunk middleware. Denne middleware tillader os at arbejde med dispatched actions, bruge dispatch og getState metoder fra store i koden af vores thunk, samt hjælpe dispatch metoden med at arbejde ikke kun med almindelige JS objekter, men også med enheder som funktioner og promises.

Normalt kaldes en thunk-funktion med to argumenter dispatch og getState (om nødvendigt), som kan bruges i kroppen af denne funktion. Med den kan man sende almindelige actions. Den kan også sendes via store.dispatch. Et eksempel på en sådan funktion er vist nedenfor:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Lad os nu åbne vores produktapplikation. Den første ting, vi skal have fra serveren, når applikationen startes, er produktlisten. Da thunks normalt skrives i slice-filer, åbner vi filen productsSlice.js.

Den gode nyhed er, at vi ikke behøver at installere Redux Thunk, da funktionen configureStore fra RTK allerede gør dette for os. Så lad os blot tilføje createAsyncThunk til importen i filen:

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

Lad os også tilføje vores klient til importen:

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

Og nu ved hjælp af createAsyncThunk opretter vi vores første thunk til at hente produkter, gør dette umiddelbart efter erklæringen af objektet initialState:

export const fetchProducts = createAsyncThunk()

Den første parameter for createAsyncThunk vil være en streng for typen af den genererede action, og den anden er en callback-funktion for payload, som som resultat vil returnere enten data eller et promise med en fejl (se filen client.js). I funktionens kode kalder vi client.get og sender den stien, som vi specificerede på serveren (se de accepterede parametre for http.get i server.js):

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

Åbn din studerendeapplikation. Åbn filen studentsSlice.js i den. Importer funktionen createAsyncThunk for at oprette thunk, samt client for at sende API-forespørgsler til serveren.

Umiddelbart efter erklæringen af objektet initialState opret en thunk ved hjælp af createAsyncThunk fetchStudents for at hente listen over studerende, som vil sende en GET-forespørgsel til adressen /fakeServer/students, specificeret i din fil server.js, og returnere response.data, som vist i lektionens materialer. Som første parameter for createAsyncThunk angiv strengen students/fetchStudents for action-typen.