Redux-da thunks-lere giriş

Öňki bapda, maglumat çalşyrmak üçin serweriň, maglumat bazasynyň we müşderiniň işini gurapdyk. Indi bizim 'sinxron' gurapdyrylan Redux programmamyzyň öňki bapdaky soňky sapakda döreden asinxron müşderimiz bilen özara gatnaşyk etmegine ýardam edjek iň soňky köpri gurmak zerurlygy bar.

Öňki bölümiň ilkinji sapaklaryndan ýadyňyzda bolşy ýaly, Redux asinxron logika bilen işlemek barada hiç zat bilmeýär we bun üçin biz thunk middleware ulanyarys. Bu middleware iberilen actions-lar bilen işlemäge, thunk kodymyzda dispatch we getState store usullaryny ulanyp bilmäge, şeýle hem dispatch usulyna adaty JS obýektleri bilen çäklenmän, funksiýalar we promisler ýaly esesler bilen hem işlemäge mümkinçilik berýär.

Adatça thunk-funkiýasy iki argument bilen çagyrylýar dispatch we getState (zerur bolsa), olary bu funksiýanyň bedeninde ulanyp bolýar. Onuň kömegi bilen adaty ekşenleri iberip bolýar. Şeýle hem onu store.dispatch arkaly iberip bolýar. Mysal aşakda görkezilýär:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Köne reňk: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Täze reňk: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Indi önümler barada programmamyzy açalyň. Programmany işledeniňizde serwerden ilkinji almaly zatymyz - bu önümleriň sanawydyr. Adatça thunks-lar slice faýllarynda ýazylandygy üçin, biz productsSlice.js faýlyny açarys.

Hoş habarymysyz şu, biz Redux Thunk gurnamak bilen aladalanyp ýöremeýäris, sebäbi RTK-daky configureStore funksiýasy buny bizim üçin eder. Şonuň üçin faýla importda createAsyncThunk goşup göreli:

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

Şeýle hem müşderimizi hem import edeliň:

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

Indi bolsa createAsyncThunk-iň kömegi bilen ilkinji thunk-y önümleri almak üçin döredeliň, buny initialState obyekti hökmünde kesgitlenenden soň:

export const fetchProducts = createAsyncThunk()

createAsyncThunk-iň birinji parametri döredilen ekşeniň görnüşi üçin setir alar, ikinjisi bolsa payload üçin kollbek-funkiýasy bolup, netijede ýa-da maglumatlary, ýa-da ýalňyşlyk promisini gaýtarar (serwer faýlyna serediň client.js). Funksiýanyň kodunda biz client.get çagyryp, serwerde görkezen ýoluny berýäris (serwerde kabul edilýän parametrlere serediň http.get server.js faýlynda):

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

Talyp programmany açyň. Onyň içinde studentsSlice.js faýlyny açyň. Thunk döretmek üçin createAsyncThunk funksiýasyny import ediň, şeýle hem serwere API soraglaryny ibermek üçin client.

initialState obyekti hökmünde kesgitlenenden soň, createAsyncThunk arkaly thunk dörediň fetchStudents talyplaryň sanawyny almak üçin, GET-sorag iberjek /fakeServer/students salgyna, siziň server.js faýlyňyzda görkezilişi ýaly, we gaýtarjak response.data, sapak materiallarynda görkezilişi ýaly. createAsyncThunk üçin birinji parametr hökmünde students/fetchStudents setirini görkeziň ekşeniň görnüşi üçin.