Įvadas į thunks Redux

Ankstesniame skyriuje mes organizavome serverio, duomenų bazės ir kliento darbą duomenų apsikeitimui. Dabar mums reikia nutiesti paskutinį tiltelį, kuris padės mūsų 'sinchroniškai' organizuotai Redux programėlei sąveikauti su asinchroniniu klientu, kurį sukūrėme paskutinėje ankstesnio skyriaus pamokoje, kad siųstume užklausas ir gautume reikiamus duomenis atsakyme.

Kaip prisimename iš pirmųjų ankstesnio skyriaus pamokų, Redux nieko nežino apie darbą su asinchronine logika, ir tam mes naudosime thunk middleware. Šis middleware leidžia dirbti su išsiųstais actions, naudoti mūsų thunk kode dispatch ir getState store metodus, taip pat padėti metodui dispatch dirbti ne tik su įprastais JS objektais, bet ir su tokiomis esybėmis, kaip funkcijos ir promisai.

Paprastai thunk-funkcija iškviečiama su dviem argumentais dispatch ir getState (jei reikia), kuriais galima naudotis šios funkcijos kūne. Jos pagalba galima siųsti įprastus action. Taip pat ją galima siųsti per store.dispatch. Tokios funkcijos pavyzdys pateiktas žemiau:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Sena Spalva: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Nauja Spalva: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Dabar atidarykime mūsų produktų programėlę. Pirmas dalykas, kurį turime gauti iš serverio paleidus programėlę - tai produktų sąrašas. Kadangi paprastai thunks rašomi slice failuose, mes atidarysime failą productsSlice.js.

Džiugi naujiena ta, kad mums nereikia vargintis su Redux Thunk įdiegimu, nes funkcija configureStore iš RTK jau tai padarys už mus. Todėl tiesiog pridėkime createAsyncThunk į importą faile:

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

Taip pat pridėkime į importą ir mūsų klientą:

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

O dabar pagalba createAsyncThunk sukurkime mūsų pirmąjį thunk produktų gavimui, padarykime tai iškart po objekto initialState deklaracijos:

export const fetchProducts = createAsyncThunk()

Pirmuoju parametru createAsyncThunk bus priimti eilutę sugeneruoto action tipui, o antruoju - callback-funkciją payload, kuri kaip rezultatą grąžins arba duomenis, arba promise su klaida (žiūrėkite failą client.js). Funkcijos kode mes iškviečiame client.get ir perduodame jam kelią, kurį nurodėme serveryje (pažiūrėkite priimamus parametrus http.get server.js):

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

Atidarykite savo studentų programėlę. Atidarykite joje failą studentsSlice.js. Importuokite į jį funkciją createAsyncThunk thunk kūrimui, taip pat client API užklausų siuntimui į serverį.

Iškart po objekto initialState deklaracijos pagalba createAsyncThunk sukurkite thunk fetchStudents studentų sąrašo gavimui, kuris siųstų GET užklausą adresu /fakeServer/students, nurodytu jūsų faile server.js, ir grąžintų response.data, kaip parodyta pamokos medžiagoje. Kaip pirmą parametrą createAsyncThunk nurodykite eilutę students/fetchStudents action tipui.