Sissejuhatus thunk'idesse Redux'is

Eelmises peatükis organiseerisime serveri, andmebaasi ja kliendi andmevahetuseks. Nüüd peame looma viimase silla, mis aitab meil 'sünkroonselt' organiseeritud Redux rakendusel suhelda asünkroonse kliendiga, mille lõime eelmise peatüki viimasel tunnil, et saata päringuid ja vastuses vajalikke andmeid.

Nagu mäletame esimestest tundidest eelmisest jaotisest, Redux ei tea midagi asünkroonse loogikaga töötamisest ja selleks kasutame thunk middleware'it. See middleware võimaldab töötada saadetud action'itega, kasutada oma thunk'i koodis dispatch ja getState meetodeid store'ist, ning aidata dispatch meetodil töötada mitte ainult tavaliste JS objektidega, vaid ka selliste olemitega nagu funktsioonid ja promis'id.

Tavaliselt kutsutakse thunk-funktsioon kahe argumendiga dispatch ja getState (vajadusel), mida saab kasutada selle funktsiooni kehas. Selle abil saab saata tavalisi action'eid. Samuti saab seda saata läbi store.dispatch. Sellise funktsiooni näide on toodud allpool:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Vana värv: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Uus värv: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Avame nüüd meie tooterakenduse. Esimene asi, mida peame serverist saama rakenduse käivitamisel - see on toodete nimekiri. Kuna tavaliselt thunk'id kirjutatakse slice-failidesse, siis avame faili productsSlice.js.

Hea uudis on see, et meil ei pea ise Redux Thunk'i paigaldama, kuna funktsioon configureStore RTK'st teeb selle meie eest ära. Seega lihtsalt lisame createAsyncThunk impordi faili:

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

Lisame impordi ka meie kliendi:

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

Ja nüüd createAsyncThunk abil loome oma esimese thunk'i toodete saamiseks, teeme seda kohe pärast objekti initialState deklareerimist:

export const fetchProducts = createAsyncThunk()

Esimese parameetrina createAsyncThunk võtab stringi genereeritava action'i tüübi jaoks, ja teise - callback-funktsiooni payload jaoks, mis lõpuks tagastab kas andmed või promisi veaga (vaadake faili client.js). Funktsiooni koodis me kutsume client.get ja anname sellele tee, mille me serveris määrasime (vaadake vastuvõetavaid parameetreid http.get failis server.js):

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

Avage oma õpilaste rakendus. Avage selles fail studentsSlice.js. Importige sinna funktsioon createAsyncThunk thunk'i loomiseks, ning client API päringute saatmiseks serverisse.

Kohe pärast objekti initialState deklareerimist createAsyncThunk abil looge thunk fetchStudents õpilaste nimekirja saamiseks, mis saadab GET-päringu aadressile /fakeServer/students, määratud teie failis server.js, ja tagastab response.data, nagu näidatud õppematerjalides. Esimese parameetrina createAsyncThunk jaoks määrake string students/fetchStudents action'i tüübi jaoks.