Johdatus thunkeihin Reduxissa

Edellisessä luvussa järjestelimme palvelimen, tietokannan ja asiakkaan tietojen vaihtoa varten. Nyt meidän on tehtävä viimeinen silta, joka auttaa sovellustamme, joka on 'synkronisesti' järjestetty Redux sovellus, vuorovaikuttamaan asynkronisen asiakkaan kanssa, jonka loimme viimeisellä edellisen luvun oppitunnilla, lähettämään kyselyitä ja vastaanottamaan tarvittavat tiedot vastauksessa.

Kuten muistamme ensimmäisistä oppitunneista edellisestä osiosta, Redux ei tiedä mitään asynkronisen logiikan käsittelystä, ja tätä varten käytämme thunk middlewarea. Tämä middleware mahdollistaa lähetettyjen actionien käsittelyn, koodissamme thunkissa voidaan käyttää dispatch ja getState storen metodeja, ja se auttaa dispatch -metodia toimimaan paitsi tavallisten JS-olioiden kanssa, myös sellaisien entiteettien kuten funktioiden ja promisien kanssa.

Yleensä thunk-funktiota kutsutaan kahdella argumentilla dispatch ja getState (tarvittaessa), joita voidaan käyttää tämän funktion sisällä. Sen avulla voidaan lähettää tavallisia actioneita. Sitä voidaan myös lähettää store.dispatch:n kautta. Esimerkki tällaisesta funktiosta on esitetty alla:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Vanha väri: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Uusi väri: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Avataan nyt tuotesovelluksemme. Ensimmäinen asia, jonka meidän on saatava palvelimelta sovelluksen käynnistyessä, on tuotelista. Koska thunkit yleensä kirjoitetaan slice-tiedostoihin, avaamme tiedoston productsSlice.js.

Iloinen uutinen on, että meidän ei tarvitse puuhata Redux Thunkin asennuksen kanssa, koska funktio configureStore RTK:sta tekee sen jo puolestamme. Joten lisätään vain createAsyncThunk importtiin tiedostossa:

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

Lisätään myös asiakas importtiin:

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

Ja nyt createAsyncThunk:n avulla luomme ensimmäisen thunkimme tuotteiden hakemiseksi, teemme tämän heti initialState -olion määrittelyn jälkeen:

export const fetchProducts = createAsyncThunk()

Ensimmäinen createAsyncThunk:n parametri on merkkijono generoitavan actionin tyypille, ja toinen on callback-funktio payload:lle, joka palauttaa joko tiedot tai promisen virheen kanssa (katso tiedosto client.js). Funktiokoodissa me kutsumme client.get:tä ja annamme sille polun, jonka määritimme palvelimella (katso http.get:n vastaanottamat parametrit server.js -tiedostossa):

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

Avaa opiskelijasovelluksesi. Avaa siinä tiedosto studentsSlice.js. Tuo siihen funktio createAsyncThunk thunkien luomista varten, sekä client API-kyselyiden lähettämistä palvelimelle varten.

Heti initialState -olion määrittelyn jälkeen createAsyncThunk:n avulla luo thunk fetchStudents opiskelijalistaa varten, joka lähettää GET-kyselyn osoitteeseen /fakeServer/students, joka on määritelty sinun server.js -tiedostossasi, ja palauttaa response.data:n, kuten oppitunnin materiaaleissa on esitetty. Ensimmäisenä parametrina createAsyncThunk:lle anna merkkijono students/fetchStudents actionin tyypille.