Hyrje në Thunks në Redux

Në kapitullin e mëparshëm ne organizuam punën e serverit, bazës së të dhënave dhe klientit për shkëmbim të të dhënave. Tani ne kemi nevojë të vendosim urën e fundit, e cila do të ndihmojë aplikacionin tonë Redux të organizuar 'sinkronisht' të ndërveprojë me klientin asinkron, të cilin e krijuam në mësimin e fundit të kapitullit të mëparshëm, për të dërguar kërkesa dhe për të marrë të dhënat e nevojshme në përgjigje.

Siç e kujtojmë nga mësimet e para të seksionit të mëparshëm, Redux nuk di asgjë për punën me logjikën asinkrone dhe për këtë ne do të përdorim thunk middleware. Ky middleware lejon punën me actions të dërguara, të përdorë në kodin e thunk tonë metodat dispatch dhe getState të store, si dhe të ndihmojë metodën dispatch të punojë jo vetëm me objekte të rregullta JS, por edhe me entitete të tilla si funksione dhe promise.

Zakonisht funksioni thunk thirret me dy argumente dispatch dhe getState (siç është e nevojshme), të cilat mund të përdoren në trupin e këtij funksioni. Me ndihmën e tij mund të dërgoni actione të rregullta. Gjithashtu ai mund të dërgohet përmes store.dispatch. Një shembull i një funksioni të tillë është paraqitur më poshtë:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Ngjyra e Vjetër: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Ngjyra e Re: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Tani le të hapim aplikacionin tonë me produktet. Gjëja e parë që duhet të marrim nga serveri kur nisim aplikacionin është lista e produkteve. Meqenëse zakonisht thunks shkruhen në skedarët slice, ne do të hapim skedarin productsSlice.js.

Lajmi i gëzueshëm është se ne nuk kemi nevojë të merremi me instalimin e Redux Thunk, pasi funksioni configureStore nga RTK e ka bërë tashmë këtë për ne. Prandaj thjesht le të shtojmë createAsyncThunk në import në skedar:

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

Le të shtojmë gjithashtu në import edhe klientin tonë:

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

Dhe tani me ndihmën e createAsyncThunk le të krijojmë thunk-in tonë të parë për marrjen e produkteve, le ta bëjmë këtë menjëherë pas deklarimit të objektit initialState:

export const fetchProducts = createAsyncThunk()

Parametri i parë i createAsyncThunk do të marrë një varg për llojin e action-it të gjeneruar, ndërsa i dyti - funksionin callback për payload, i cili si rezultat do të kthejë ose të dhëna, ose një promise me gabim (shikoni skedarin client.js). Në kodin e funksionit ne thërrasim client.get dhe i kalojmë atij rrugën, të cilën e kemi përcaktuar në server (shikoni parametrat e pranuar http.get në server.js):

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

Hapni aplikacionin tuaj me studentët. Hapni në të skedarin studentsSlice.js. Importoni në të funksionin createAsyncThunk për krijimin e thunk, si dhe client për dërgimin e kërkesave API në server.

Menjëherë pas deklarimit të objektit initialState me ndihmën e createAsyncThunk krijojeni thunk fetchStudents për marrjen e listës së studentëve, i cili do të dërgojë një kërkesë GET në adresën /fakeServer/students, të përcaktuar nga ju në skedarin server.js, dhe do të kthejë response.data, siç tregohet në materialet e mësimit. Si parametër i parë për createAsyncThunk specifikoni vargun students/fetchStudents për llojin e action-it.