Introduktion till thunks i Redux

I föregående kapitel satte vi upp servern, databasen och klienten för datautbyte. Nu måste vi bygga den sista bron som hjälper vårt 'synkront' organiserade Redux -applikation att interagera med den asynkrona klienten som vi skapade i den sista lektionen i föregående kapitel, för att skicka förfrågningar och få nödvändig data i svaret.

Som vi minns från de första lektionerna i föregående avsnitt, vet Redux inget om att hantera asynkron logik och för detta kommer vi att använda thunk middleware. Denna middleware möjliggör att arbeta med skickade actions, använda dispatch och getState metoder från store i vår thunk-kod, och hjälper även metoden dispatch att fungera inte bara med vanliga JS-objekt, utan även med entiteter som funktioner och promiser.

Vanligtvis anropas thunk-funktionen med två argument dispatch och getState (om nödvändigt), som kan användas i funktionens kropp. Med den kan man skicka vanliga actions. Den kan också skickas via store.dispatch. Ett exempel på en sådan funktion visas nedan:

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)

Låt oss nu öppna vår produktapplikation. Det första vi måste få från servern när applikationen startas är produktlistan. Eftersom thunks vanligtvis skrivs i slice-filer, öppnar vi filen productsSlice.js.

Den glada nyheten är att vi inte behöver installera Redux Thunk, eftersom funktionen configureStore från RTK redan gör detta åt oss. Så låt oss bara lägga till createAsyncThunk i importen i filen:

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

Låt oss också lägga till vår klient i importen:

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

Och nu med hjälp av createAsyncThunk skapar vi vår första thunk för att hämta produkter, vi gör detta direkt efter deklarationen av objektet initialState:

export const fetchProducts = createAsyncThunk()

Den första parametern för createAsyncThunk kommer att ta en sträng för typen av genererad action, och den andra - en callback-funktion för payload, som kommer att returnera antingen data eller ett promise med ett fel (se filen client.js). I funktionens kod anropar vi client.get och skickar sökvägen som vi angav på servern (se de accepterade parametrarna för http.get i server.js):

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

Öppna din studentapplikation. Öppna filen studentsSlice.js i den. Importera funktionen createAsyncThunk för att skapa thunk, samt client för att skicka API-förfrågningar till servern.

Direkt efter deklarationen av objektet initialState skapa en thunk med hjälp av createAsyncThunk fetchStudents för att hämta listan över studenter, som skickar en GET-förfrågan till adressen /fakeServer/students, specificerad i din fil server.js, och returnerar response.data, som visas i lektionens material. Som första parameter för createAsyncThunk, ange strängen students/fetchStudents för action-typen.