Uvod v thunks v Redux

V prejšnjem poglavju smo organizirali delo strežnika, podatkovne baze in odjemalca za izmenjavo podatkov. Zdaj moramo zgraditi še zadnjo povezavo, ki bo pomagala naši 'sinhroni' organizirani Redux aplikaciji interagirati z asinhronim odjemalcem, ki smo ga ustvarili v zadnji lekciji prejšnjega poglavja, za pošiljanje zahtevkov in pridobivanje potrebnih podatkov v odgovoru.

Kot se spomnimo iz prvih lekcij prejšnjega razdelka, Redux ne ve ničesar o delu z asinhrono logiko in zato bomo uporabili thunk middleware. Ta middleware omogoča delo z odposlanimi actions (akcijami), uporabo metod store dispatch in getState v kodu našega thunk, ter pomaga metodi dispatch delovati ne le z navadnimi JS objekti, temveč tudi s entitetami, kot so funkcije in promise-i (obljube).

Običajno se thunk-funkcija kliče z dvema argumentoma dispatch in getState (po potrebi), ki ju lahko uporabljamo v telesu te funkcije. Z njo lahko pošiljamo običajne action-e. Prav tako jo lahko pošljemo preko store.dispatch. Primer takšne funkcije je prikazan spodaj:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Stara barva: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Nova barva: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Odprimo zdaj našo aplikacijo s produkti. Prva stvar, ki jo moramo dobiti od strežnika ob zagonu aplikacije, je seznam produktov. Ker se thunks običajno pišejo v slice-datotekah, bomo odprli datoteko productsSlice.js.

Dobra novica je, da nam ni treba vmešavati z namestitvijo Redux Thunk, ker bo funkcija configureStore iz RTK to že naredila za nas. Zato preprosto dodajmo createAsyncThunk v uvoz v datoteki:

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

Dodajmo tudi naš odjemalec (client) v uvoz:

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

In zdaj s pomočjo createAsyncThunk ustvarimo naš prvi thunk za pridobivanje produktov. Naredimo to takoj za deklaracijo objekta initialState:

export const fetchProducts = createAsyncThunk()

Prvi parameter createAsyncThunk bo sprejel niz za tip generiranega action-a, drugi parameter pa callback-funkcijo za payload, ki bo kot rezultat vrnila ali podatke ali promise z napako (poglejte datoteko client.js). V kodu funkcije pokličemo client.get in ji posredujemo pot, ki smo jo določili na strežniku (poglejte sprejete parametre http.get v server.js):

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

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko studentsSlice.js. Uvozite vanjo funkcijo createAsyncThunk za ustvarjanje thunk, in client za pošiljanje API zahtev na strežnik.

Takoj za deklaracijo objekta initialState s pomočjo createAsyncThunk ustvarite thunk fetchStudents za pridobivanje seznama študentov, ki bo pošiljal GET-zahtevek na naslov /fakeServer/students, določen v vaši datoteki server.js, in vrnil response.data, kot je prikazano v gradivu lekcije. Kot prvi parameter za createAsyncThunk določite niz students/fetchStudents za tip action-a.