Redux-də Thunks-lərə Giriş

Əvvəlki fəsildə biz məlumat mübadiləsi üçün server, verilənlər bazası və klientin işini təşkil etdik. İndi bizə, bizim 'sinxron' təşkil olunmuş Redux tətbiqimizin əvvəlki fəslin son dərsində yaratdığımız asinxron klientlə qarşılıqlı əlaqə qurması, sorğular göndərməsi və cavabda lazımi məlumatları əldə etməsi üçün son körpünü qurmaq lazımdır.

Əvvəlki bölmənin ilk dərslərindən xatırladığımız kimi, Redux asinxron məntiqlə işləməyi bilmir və bunun üçün biz thunk middleware işlədəcəyik. Bu middleware göndərilmiş actions-larla işləməyə, thunk kodumuzda store-un dispatch və getState metodlarından istifadə etməyə, həmçinin dispatch metoduna adi JS obyektləri ilə yanaşı, funksiyalar və promislər kimi varlıqlarla işləməyə kömək edir.

Adətən thunk-funksiyası iki arqumentlə çağırılır dispatch və getState (lazım olduqda), bu funksiyanın daxilində onlardan istifadə etmək olar. Onun vasitəsilə adi actionlar göndərmək olar. Həmçinin onu store.dispatch vasitəsilə göndərmək olar. Belə bir funksiyanın nümunəsi aşağıda göstərilib:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Köhnə Rəng: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Yeni Rəng: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Gəlin indi məhsullarla olan tətbiqimizi açaq. Tətbiqi işə saldıqda serverdən əldə etməli olduğumuz ilk şey məhsul siyahısıdır. Thunks-lər adətən slice fayllarında yazıldığı üçün, biz productsSlice.js faylını açaq.

Sevindirici xəbər odur ki, bizə Redux Thunk qurmaqla məşğul olmaq lazım deyil, çünki RTK-dan olan configureStore funksiyası bunu artıq bizim üçün edəcək. Buna görə də faylda importa sadəcə createAsyncThunk əlavə edək:

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

Gəlin importa klienti də əlavə edək:

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

İndi isə createAsyncThunk köməyi ilə məhsulları əldə etmək üçün ilk thunk-ımızı yaradaq, bunu initialState obyektinin elanından dərhal sonra edək:

export const fetchProducts = createAsyncThunk()

createAsyncThunk-ın birinci parametri yaradılan action üçün tip kimi sətri qəbul edəcək, ikincisi isə payload üçün kolbek-funksiyası olacaq, nəticədə o, ya məlumatları, ya da xəta ilə promisi qaytaracaq (client.js faylına baxın). Funksiya kodunda biz client.get çağırırıq və ona serverdə göstərdiyimiz yolu ötürürük (server.js faylında http.get-ın qəbul etdiyi parametrlərə baxın):

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

Tələbələrlə olan tətbiqinizi açın. Orada studentsSlice.js faylını açın. Oraya thunk yaratmaq üçün createAsyncThunk funksiyasını, həmçinin serverə API sorğuları göndərmək üçün client import edin.

initialState obyektinin elanından dərhal sonra createAsyncThunk köməyi ilə tələbələrin siyahısını əldə etmək üçün fetchStudents thunk-ını yaradın, o, server.js faylında göstərdiyiniz /fakeServer/students ünvanına GET-sorğusu göndərəcək və dərs materiallarında göstərildiyi kimi response.data qaytaracaq. createAsyncThunk üçün birinci parametr kimi action tipi üçün students/fetchStudents sətirini göstərin.