Introducere în thunks în Redux

În capitolul anterior am organizat lucrul serverului, bazei de date și clientului pentru schimbul de date. Acum trebuie să punem ultima punte de legătură, care va ajuta aplicația noastră Redux 'sincron' organizată să interacționeze cu clientul asincron, pe care l-am creat în ultima lecție a capitolului anterior, pentru a trimite cereri și a primi datele necesare în răspuns.

După cum ne amintim din primele lecții ale secțiunii precedente, Redux nu știe să lucreze cu logica asincronă și pentru asta vom folosi thunk middleware. Acest middleware permite lucrul cu acțiunile trimise, folosirea în codul thunk-ului nostru a metodelor store dispatch și getState, precum și ajută metoda dispatch să lucreze nu doar cu obiecte JS obișnuite, ci și cu entități precum funcții și promisiuni.

De obicei, funcția thunk este apelată cu doi argumente dispatch și getState (după caz), cu care se poate lucra în corpul acestei funcții. Cu ajutorul ei se pot trimite acțiuni obișnuite. De asemenea, ea poate fi trimisă prin store.dispatch. Exemplu de astfel de funcție este dat mai jos:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Culoarea veche: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Culoarea nouă: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Hai să deschidem acum aplicația noastră cu produse. Primul lucru pe care trebuie să-l obținem de la server la lansarea aplicației - este lista de produse. Deoarece de obicei thunk-urile se scriu în fișierele slice, vom deschide fișierul productsSlice.js.

Vestea bună constă în faptul că nu trebuie să ne chinuim cu instalarea Redux Thunk, deoarece funcția configureStore din RTK deja face asta pentru noi. Prin urmare, doar vom adăuga createAsyncThunk în import în fișier:

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

Vom adăuga și clientul nostru în import:

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

Și acum cu ajutorul createAsyncThunk vom crea primul nostru thunk pentru obținerea produselor, vom face asta imediat după declararea obiectului initialState:

export const fetchProducts = createAsyncThunk()

Primul parametru al createAsyncThunk va primi un șir pentru tipul acțiunii generate, iar al doilea - funcția callback pentru payload, care în rezultat va returna fie date, fie o promisiune cu eroare (vezi fișierul client.js). În codul funcției noi apelăm client.get și îi transmitem calea, pe care am indicat-o pe server (verificați parametrii acceptați de http.get în server.js):

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

Deschideți aplicația voastră cu studenți. Deschideți în ea fișierul studentsSlice.js. Importați în el funcția createAsyncThunk pentru crearea thunk-ului, precum și client pentru trimiterea cererilor API către server.

Imediat după declararea obiectului initialState cu ajutorul createAsyncThunk creați thunk-ul fetchStudents pentru obținerea listei de studenți, care va trimite o cerere GET la adresa /fakeServer/students, indicată de dumneavoastră în fișierul server.js, și va returna response.data, așa cum se arată în materialele lecției. Ca prim parametru pentru createAsyncThunk indicați șirul students/fetchStudents pentru tipul acțiunii.