Ներածություն Redux-ի thunks-ին

Նախորդ գլխում մենք կազմակերպեցինք սերվերի, տվյալների բազայի և կլիենտի աշխատանքը տվյալների փոխանակման համար: Այժմ մեզ անհրաժեշտ է կառուցել վերջին կամուրջը, որն օգնելու է մեր 'սինխրոն' կազմակերպված Redux հավելվածին փոխազդել ասինխրոն կլիենտի հետ, որը մենք ստեղծեցինք նախորդ գլխի վերջին դասին, հարցումներ ուղարկելու և անհրաժեշտ տվյալները պատասխանում ստանալու համար:

Ինչպես հիշում ենք նախորդ բաժնի առաջին դասերից, Redux-ը ոչինչ չգիտի ասինխրոն տրամաբանության հետ աշխատելու մասին, և դրա համար մենք կօգտագործենք thunk middleware: Այս middleware-ը թույլ է տալիս աշխատել ուղարկված actions-ների հետ, օգտագործել մեր thunk-ի կոդում dispatch և getState store-ի մեթոդները, ինչպես նաև օգնել 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-ները գրվում են slice-ֆայլերում, ապա մենք կբացենք ֆայլը productsSlice.js:

Ուրախ լուրն այն է, որ մեզ պետք չ է զբաղվել Redux Thunk-ի տեղադրմամբ, քանի որ configureStore ֆունկցիան RTK-ից արդեն դա կանի մեզ համար: Ուստի պարզապես ավելացնենք createAsyncThunk իմպորտը ֆայլում.

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

Նաև ավելացնենք իմպորտում մեր կլիենտը.

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

Եվ այժմ createAsyncThunk-ի օգնությամբ ստեղծենք մեր առաջին thunk-ը ապրանքները ստանալու համար, դա անենք անմիջապես initialState օբյեկտի հայտարարումից հետո.

export const fetchProducts = createAsyncThunk()

createAsyncThunk-ի առաջին պարամետրը կընդունի տող գեներացվող էքշնի տիպի համար, իսկ երկրորդը՝ payload-ի համար նախատեսված callback-ֆունկցիան, որը արդյունքում կվերադարձնի կամ տվյալներ, կամ սխալով պրոմիս (տեսեք ֆայլը client.js): Ֆունկցիայի կոդում մենք կանչում ենք client.get և փոխանցում ենք դրան ուղին, որը մենք նշեցինք սերվերում (նայեք ընդունվող պարամետրերը http.get-ի server.js-ում).

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

Բացեք ձեր ուսանողների հավելվածը: Բացեք դրա մեջ studentsSlice.js ֆայլը: Իմպորտացրեք դրա մեջ createAsyncThunk ֆունկցիան thunk ստեղծելու համար, ինչպես նաև client-ը API հարցումներ սերվեր ուղարկելու համար:

Անմիջապես initialState օբյեկտի հայտարարումից հետո createAsyncThunk-ի օգնությամբ ստեղծեք thunk fetchStudents ուսանողների ցանկը ստանալու համար, որը կուղարկի GET-հարցում /fakeServer/students հասցեով, նշված ձեր server.js ֆայլում, և կվերադարձնի response.data, ինչպես ցուցադրված է դասի նյութերում: Որպես createAsyncThunk-ի առաջին պարամետր նշեք տողը students/fetchStudents էքշնի տիպի համար: