Redux-та thunks-пен таныстыру

Алдыңғы тарауда біз деректер алмасу үшін серверді, деректер базасын және клиентті ұйымдастырдық. Енді бізге біздің 'синхронды' ұйымдастырылған Redux қолданбасымызды асинхронды клиентпен өзара әрекеттесуге көмектесетін соңғы көпірді салу қажет, оны біз өткен тараудың соңғы сабағында сұраулар жіберу және жауапта қажетті деректерді алу үшін жасаған болатынбыз.

Біз алдыңғы бөлімнің алғашқы сабақтарынан еске алатынымыздай, Redux асинхронды логикамен жұмыс істеуді білмейді және бұл үшін біз thunk middleware қолданамыз. Бұл middleware жіберілген actions-термен жұмыс істеуге, біздің thunk кодымызда store-дың dispatch және getState әдістерін пайдалануға, сонымен қатар dispatch әдісіне жай JS объектілерімен ғана емес, сонымен қатар функциялар мен промисстер сияқты нәрселермен де жұмыс істеуге көмектеседі.

Әдетте thunk-функция екі аргументпен dispatch және getState (қажет болған жағдайда) шақырылады, оларды осы функцияның денесінде пайдалануға болады. Оның көмегімен қарапайым экшендерді жіберуге болады. Сонымен қатар оны store.dispatch арқылы жіберуге болады. Мұндай функцияның мысалы төменде келтірілген:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Ескі Түс: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Жаңа Түс: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Енді өнімдерімізбен қолданбамызды ашайық. Бізге қолданбаны іске қосқан кезде серверден алғаш рет алуымыз керек нәрсе - бұл өнімдер тізімі. Әдетте thunks-тар слайс-файлдарында жазылатындықтан, біз productsSlice.js файлын ашамыз.

Жағымды жаңалық мынада, бізге Redux Thunk орнатумен аунақтаудың қажеті жоқ, себебі RTK-тен configureStore функциясы бұны біз үшін дайын жасайды. Сондықтан файлдағы импортқа createAsyncThunk қосамыз:

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

Сондай-ақ импортқа біздің клиентімізді де қосамыз:

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

Енді createAsyncThunk көмегімен өнімдерді алу үшін біздің бірінші thunk-ты жасаймыз, мұны initialState объектісін жариялағаннан кейін бірден орындаймыз:

export const fetchProducts = createAsyncThunk()

createAsyncThunk бірінші параметр ретінде жасалатын action түрі үшін жолды қабылдайды, ал екіншісі - payload үшін колбэк-функцияны, ол нәтижеде не деректерді, не қателікпен промиссты қайтарады (client.js файлын қараңыз). Функция кодында біз client.get шақырамыз және оған біз серверде көрсеткен жолды береміз (server.js файлындағы http.get қабылдайтын параметрлерді қараңыз):

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

Студенттеріңізбен қолданбаңызды ашыңыз. Онда studentsSlice.js файлын ашыңыз. Онда thunk жасау үшін createAsyncThunk функциясын, сондай-ақ серверге API сұрауларын жіберу үшін client импорттаңыз.

initialState объектісін жариялағаннан кейін бірден createAsyncThunk көмегімен студенттер тізімін алу үшін fetchStudents thunk-ын жасаңыз, ол /fakeServer/students мекенжайына GET-сұрау жібереді, server.js файлында көрсетілген, және сабақ материалдарында көрсетілгендей response.data қайтарады. createAsyncThunk үшін бірінші параметр ретінде action түрі үшін students/fetchStudents жолын көрсетіңіз.