Uvod u thunks u Redux

U prethodnom poglavlju smo organizovali rad servera, baze podataka i klijenta za razmenu podataka. Sada nam je potrebno da postavimo poslednji mostić koji će pomoći našoj 'sinhronoj' organizovanoj Redux aplikaciji da komunicira sa asinhronim klijentom, kojeg smo kreirali na poslednjoj lekciji prethodnog poglavlja, kako bismo slali zahteve i dobijali potrebne podatke u odgovoru.

Kako se sećamo iz prvih lekcija prethodne sekcije, Redux ne zna ništa o radu sa asinhronom logikom i za to ćemo koristiti thunk middleware. Ovaj middleware omogućava rad sa poslatim actions, korišćenje u kodu našeg thunk-a dispatch i getState metoda store-a, a takođe pomaže metodu dispatch da radi ne samo sa običnim JS objektima, već i sa entitetima kao što su funkcije i promisi.

Obično se thunk-funkcija poziva sa dva argumenta dispatch i getState (po potrebi), kojima se može koristiti u telu ove funkcije. Pomoću nje se mogu slati obični ekšeni. Takođe ona se može slati preko store.dispatch. Primer takve funkcije je dat ispod:

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

store.dispatch(changeColorThunk)

Hajde sada da otvorimo našu aplikaciju sa proizvodima. Prva stvar koju treba da dobijemo od servera pri pokretanju aplikacije - to je lista proizvoda. Pošto se thunks obično pišu u slice-fajlovima, onda ćemo otvoriti fajl productsSlice.js.

Radosna vest je u tome što nam ne treba da se bakćemo sa instalacijom Redux Thunk-a, pošto će funkcija configureStore iz RTK to već uraditi za nas. Zato ćemo jednostavno dodati createAsyncThunk u import u fajlu:

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

Dodajmo takođe u import i naš klijent:

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

A sada pomoću createAsyncThunk kreiramo naš prvi thunk za dobijanje proizvoda, uradimo to odmah posle deklaracije objekta initialState:

export const fetchProducts = createAsyncThunk()

Prvi parametar createAsyncThunk će prihvatiti string za tip generisanog action-a, a drugi - callback-funkciju za payload, koja će u rezultatu vratiti ili podatke, ili promis sa greškom (pogledajte fajl client.js). U kodu funkcije mi pozivamo client.get i prosleđujemo mu putanju, koju smo naveli na serveru (pogledajte prihvaćene parametre http.get u server.js):

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

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl studentsSlice.js. Importujte u njega funkciju createAsyncThunk za kreiranje thunk-a, a takođe i client za slanje API zahteva na server.

Odmah posle deklaracije objekta initialState pomoću createAsyncThunk kreirajte thunk fetchStudents za dobijanje liste studenata, koji će slati GET-zahtev po adresi /fakeServer/students, navedenoj u vašem fajlu server.js, i vraćati response.data, kao što je prikazano u materijalima lekcije. Kao prvi parametar za createAsyncThunk navedite string students/fetchStudents za tip action-a.