Bevezetés a thunk-ok használatába a Redux-ban

Az előző fejezetben megszerveztük a szerver, az adatbázis és a kliens működését az adatcseréhez. Most meg kell húznunk az utolsó hídunkat, amely segíti a 'szinkron' módon szervezett Redux alkalmazásunkat az aszinkron klienssel való interakcióban, amit az előző fejezet utolsó leckén hoztunk létre, hogy lekéréseket küldjünk és szükséges adatokat kapjunk válaszban.

Ahogy emlékszünk az előző rész első leckéiből, a Redux nem tud semmit az aszinkron logika kezeléséről, és erre a thunk middleware-t fogjuk használni. Ez a middleware lehetővé teszi a küldött actions kezelését, lehetővé teszi a thunk kódjában a dispatch és getState store metódusok használatát, valamint segíti a dispatch metódust abban, hogy ne csak szimpla JS objektumokkal dolgozzon, hanem olyan entitásokkal is, mint a függvények és a promise-ok.

Általában a thunk-függvényt két argumentummal hívjuk meg: dispatch és getState (szükség esetén), amelyeket fel lehet használni a függvény törzsében. Segítségével küldhetünk szokásos action-öket. Továbbá küldhetjük a store.dispatch metódussal is. Egy példa egy ilyen függvényre alább látható:

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)

Most nyissuk meg a termékek alkalmazásunkat. Az első dolog, amit a szervertől kapnunk kell az alkalmazás indításakor - ez a termékek listája. Mivel általában a thunk-ok a slice fájlokban íródnak, ezért megnyitjuk a productsSlice.js fájlt.

Az örömteli hír az, hogy nincs dolgunk a Redux Thunk telepítésével, mivel a configureStore függvény az RTK-ból ezt már megteszi helyettünk. Ezért egyszerűen adjuk hozzá a createAsyncThunk importot a fájlban:

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

Adjunk hozzá importként a klienst is:

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

És most a createAsyncThunk segítségével hozzuk létre az első thunk-unkat a termékek lekéréséhez, tegyük ezt közvetlenül a initialState objektum deklarálása után:

export const fetchProducts = createAsyncThunk()

A createAsyncThunk első paramétere egy sztring a generált action típusához, a második pedig egy callback függvény a payload számára, amely az eredményben visszaad vagy adatokat, vagy egy hibás promise-ot (lásd a client.js fájlt). A függvény kódjában mi meghívjuk a client.get metódust és átadjuk neki az utat, amit a szerveren adtunk meg (nézd meg a http.get által elfogadott paramétereket a server.js fájlban):

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

Nyisd meg a diákok alkalmazásodat. Nyisd meg benne a studentsSlice.js fájlt. Importáld bele a createAsyncThunk függvényt a thunk létrehozásához, valamint a client-t a API kérések szerverre történő küldéséhez.

Közvetlenül a initialState objektum deklarálása után a createAsyncThunk segítségével hozz létre egy thunk-ot fetchStudents névvel a diákok listájának lekéréséhez, amely egy GET kérést fog küldeni a /fakeServer/students címre, ami meg van adva a server.js fájlodban, és vissza fogja adni a response.data-t, ahogyan az a lecke anyagaiban látható. A createAsyncThunk első paramétereként adj meg egy students/fetchStudents sztringet az action típushoz.