Ievads thunks Redux

Iepriekšējā nodaļā mēs organizējām servera, datu bāzes un klienta darbu datu apmaiņai. Tagad mums nepieciešams izveidot pēdējo tiltiņu, kas palīdzēs mūsu 'sinhroni' organizētajai Redux lietotnei mijiedarboties ar asinhrono klientu, kuru mēs izveidojām pēdējā iepriekšējās nodaļas nodarbībā, lai sūtītu pieprasījumus un saņemtu nepieciešamos datus atbildē.

Kā mēs atceramies no pirmajām nodarbībām iepriekšējā sadaļā, Redux neko nezina par darbu ar asinhrono loģiku, un šim nolūkam mēs izmantosim thunk middleware. Šis middleware ļauj strādāt ar nosūtītajām actions, izmantot mūsu thunk kodā dispatch un getState store metodes, kā arī palīdzēt metodei dispatch strādāt ne tikai ar parastiem JS objektiem, bet arī ar tādām entītijām kā funkcijas un promisi.

Parasti thunk-funkcija tiek izsaukta ar diviem argumentiem dispatch un getState (pēc vajadzības), kurus var izmantot šīs funkcijas ķermenī. Ar tās palīdzību var sūtīt parastās action. Arī to var sūtīt caur store.dispatch. Šādas funkcijas piemērs ir dots zemāk:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Vecā krāsa: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Jaunā krāsa: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Tagad atveram mūsu produktu lietotni. Pirmā lieta, ko mums ir jāsaņem no servera, palaižot lietotni, ir produktu saraksts. Tā kā parasti thunks tiek rakstīti slice failos, tad mēs atveram failu productsSlice.js.

Prieks ziņa ir tāda, ka mums nav jātērē laiks ar Redux Thunk instalēšanu, jo funkcija configureStore no RTK jau to izdarīs mūsu vietā. Tāpēc vienkārši pievienosim createAsyncThunk importam failā:

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

Pievienosim arī mūsu klientu importam:

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

Un tagad ar createAsyncThunk palīdzību izveidosim mūsu pirmo thunk produktu iegūšanai, izdarīsim to uzreiz pēc objekta initialState deklarēšanas:

export const fetchProducts = createAsyncThunk()

Pirmais createAsyncThunk parametrs pieņems virkni ģenerētā action tipam, bet otrais - callback funkciju payload, kas rezultātā atgriezīs vai nu datus, vai promisu ar kļūdu (skatiet failu client.js). Funkcijas kodā mēs izsaucam client.get un padodam tam ceļu, ko mēs norādījām serverī (apskatiet pieņemtos parametrus http.get server.js):

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

Atveriet savu studentu lietotni. Atveriet tajā failu studentsSlice.js. Importējiet tajā funkciju createAsyncThunk thunk izveidošanai, kā arī client API pieprasījumu sūtīšanai uz serveri.

Tūlīt pēc objekta initialState deklarēšanas ar createAsyncThunk palīdzību izveidojiet thunk fetchStudents studentu saraksta iegūšanai, kas sūtīs GET pieprasījumu uz adresi /fakeServer/students, norādītu jums failā server.js, un atgriezīs response.data, kā parādīts nodarbības materiālos. Kā pirmo parametru createAsyncThunk norādiet virkni students/fetchStudents action tipam.