Reduxда thunksлар билан танишиш

Олдинги бобда биз маълумот алмашиш учун сервер, маълумотлар базаси ва клиентни ташкил қилдик. Энди биз синхрон ташкил қилинган Redux иловамизни ўтган бобнинг сўнги дарсида яратган асинхрон клиент билан ўзаро таъсирлашишига ёрдам берадиган сўнги кўприкни тушишимиз керак, сўровлар юбориш ва жавобда керакли маълумотларни олиш учун.

Олдинги бўлимнинг биринчи дарсларидан эслашимиздай, Redux асинхрон логика билан ишлашни билмайди ва бунинг учун биз thunk middlewareдан фойдаланамиз. Бу middleware юборилган actionsлар билан ишлашга, thunk кодимизда dispatch ва getState store методларидан фойдаланишга, шунгингдек dispatch методаға oddiy JS объектлари билан бир қаторда функциялар ва промислар каби ентиликлар билан ишлашга ёрдам беради.

Одатда thunk-функция икки аргумент dispatch ва getState (зарурат бўлса) билан чақирилади, улардан бу функция таркибида фойдаланиш мумкин. Унинг ёрдамида oddiy экшенларни юбориш мумкин. Шунингдек уни 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 объектини эълон қилганимиздан кейин darhol бажарамиз:

export const fetchProducts = createAsyncThunk()

createAsyncThunk нинг биринчи параметри sifatida яратилаётган 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 объектини эълон қилганимиздан кейин darhol createAsyncThunk ёрдамида талабалар рўйхатини олиш учун thunk fetchStudents ни яратинг, у /fakeServer/students манзилига GET-сўров юборади, server.js файлингизда кўрсатилгандек, ва дарс материалларида кўрсатилганидек response.data ни қайтаради. createAsyncThunk учун биринчи параметр sifatida action тури учун students/fetchStudents серясини кўрсатинг.