Муқаддима ба thunks дар Redux

Дар боби қаблӣ мо коркарди сервер, пойгоҳи додаҳо ва клиентро барои мубодилаи додаҳо ташкил додем. Ҳоло ба мо лозим охирин пулро кашем, ки ба барномаи мои Redux-и 'синхронӣ' ташкилдодашуда кумак мекунад, то бо клиенти асинкроне, ки мо дар охирин дарси боби қаблӣ сохтем, муомила кунад, то дархостҳоро фиристод ва додаҳои заруриро дар ҷавоб гирад.

Чун мо аз дарсҳои аввали қисми қаблӣ ба ёд дорем, Redux дар бораи кор бо мантиқи асинхронӣ чизе намедонад ва барои ин мо thunk middleware-ро истифода мебарем. Ин middleware имкон медиҳад, ки бо action-ҳои фиристодашуда кор карда, дар рамзи thunk-и мо dispatch ва getState усулҳои store-ро истифода барад, инчунин ба усули dispatch кумак кунад, то ки на танҳо бо объектҳои оддии JS, балки бо чунин мафҳумҳо, чун функсияҳо ва promise-ҳо кор кунад.

Одатан, функсияи thunk бо ду аргумент dispatch ва getState (дар ҳолати зарурӣ) даъват карда мешавад, ки онҳоро метавон дар бадани ин функсия истифода бурд. Бо ёрии он метавон action-ҳои оддиро фиристод. Инчунин онро метавон тавассути 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 кор нахоҳем кард, зеро функсияи configureStore аз RTK ин корро аллакай барои мо мекунад. Аз ин рӯ танҳо createAsyncThunk-ро ба воридот дар файл илова мекунем:

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

Клиенти худро низ ба воридот илова мекунем:

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

Ва ҳоло бо ёрии createAsyncThunk аввалин thunk-и худро барои гирифтани маҳсулот месозем, ин корро баъд аз эълони объекти initialState анҷом медиҳем:

export const fetchProducts = createAsyncThunk()

Якумин параметри createAsyncThunk хоҳад гирифт сатр барои навъи action-и тавлидшуда, ва дуюм - функсияи колбэк барои payload, ки дар натиҷа хоҳад додаҳо ё promise бо хатогӣ баргардонад (нигаред ба файли 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 барои навъи action.