Introduksjon til thunks i Redux

I forrige kapittel organiserte vi arbeidet med server, database og klient for datautveksling. Nå må vi etablere den siste forbindelsen som vil hjelpe vår 'synkront' organiserte Redux applikasjon med å samhandle med den asynkrone klienten vi opprettet i forrige kapittel, for å sende forespørsler og motta nødvendige data i svaret.

Som vi husker fra de første leksjonene i forrige seksjon, vet Redux ingenting om hvordan man håndterer asynkron logikk, og for dette vil vi bruke thunk middleware. Denne middlewareen tillater oss å arbeide med sendte actions, bruke dispatch og getState metoder fra store i koden vår thunk, og hjelper dispatch metoden med å arbeide ikke bare med vanlige JS-objekter, men også med enheter som funksjoner og promises.

Vanligvis kalles thunk-funksjonen med to argumenter dispatch og getState (om nødvendig), som kan brukes i kroppen av denne funksjonen. Med den kan man sende vanlige actions. Den kan også sendes via store.dispatch. Et eksempel på en slik funksjon er vist nedenfor:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Gammel farge: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Ny farge: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

La oss nå åpne applikasjonen vår med produkter. Den første tingen vi må få fra serveren ved oppstart av applikasjonen er produktlisten. Siden thunks vanligvis skrives i slice-filer, skal vi åpne filen productsSlice.js.

Den gode nyheten er at vi ikke trenger å bry oss med installering av Redux Thunk, siden funksjonen configureStore fra RTK allerede gjør dette for oss. Så la oss bare legge til createAsyncThunk i importen i filen:

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

La oss også legge til klienten vår i importen:

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

Og nå ved hjelp av createAsyncThunk oppretter vi vår første thunk for å hente produkter, vi gjør dette rett etter deklarasjonen av initialState-objektet:

export const fetchProducts = createAsyncThunk()

Den første parameteren til createAsyncThunk vil ta en streng for typen av generert action, og den andre - en callback-funksjon for payload, som til slutt vil returnere enten data eller en promise med en feil (se fil client.js). I funksjonskoden kaller vi client.get og sender den stien som vi spesifiserte på serveren (se på de aksepterte parameterne http.get i server.js):

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

Åpne applikasjonen din med studenter. Åpne filen studentsSlice.js i den. Importer funksjonen createAsyncThunk for å opprette thunk, og også client for å sende API-forespørsler til serveren.

Rett etter deklarasjonen av initialState-objektet opprett en thunk ved hjelp av createAsyncThunk fetchStudents for å hente listen over studenter, som vil sende en GET-forespørsel til adressen /fakeServer/students, spesifisert i filen server.js, og returnere response.data, som vist i leksjonsmaterialet. Som første parameter til createAsyncThunk spesifiser strengen students/fetchStudents for action-typen.