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'тер слайс-файлдарында жазылгандыктан, биз файлды ачабыз 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'ти чакырып, ага жолдон өтүп, биз серверде көрсөткөн жолду беребиз (караңыз http.get тарабынан кабыл алынган параметрлерди server.js файлында):

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 жардамы менен thunk түзүңүз fetchStudents студенттердин тизмесин алуу үчүн, ал GET-сурамды жиберет /fakeServer/students дарегине, көрсөтүлгөндөй сиздин server.js файлыңызда, жана кайтарат response.data, сабактын материалдарында көрсөтүлгөндөй. createAsyncThunk үчүн биринчи параметр катары students/fetchStudents сабын action'дун тиби үчүн көрсөтүңүз.