Увядзенне ў thunks у Redux

У папярэдняй главе мы арганізавалі работу сервера, базы даных і кліента для абмену данымі. Цяпер нам неабходна навесці апошні масток, які дапаможа нашаму 'сінхронна' арганізаванаму Redux прыкладанню ўзаемадзейнічаць з асінхронным кліентам, якога мы стварылі на апошнім уроку папярэдняй главы, каб адпраўляць запыты і атрымліваць неабходныя даныя ў адказе.

Як мы помнім з першых урокаў папярэдняга раздзела, Redux нічога не ведае аб працы з асінхроннай логікай і для гэтага мы будзем выкарыстоўваць thunk middleware. Гэты middleware дазваляе працаваць з адпраўленымі actions, выкарыстоўваць у кодзе нашага thunk dispatch і getState метады store, а таксама дапамагаць метаду dispatch працаваць не толькі з звычайнымі JS аб'ектамі, але і з такімі сутнасцямі, як функцыі і промiсы.

Звычайна thunk-функцыя выклікаецца з двума аргументамі dispatch і getState (пры неабходнасці), якімі можна карыстацца ў целе гэтай функцыі. З дапамогай яе можна адпраўляць звычайныя экшэны. Таксама яе можна адпраўляць праз store.dispatch. Прыклад такой функцыі прыведзены ніжэй:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${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, якая ў выніку верне альбо даныя, альбо проміс з памылкай (гледзьце файл 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.