Атрыманне дадзеных прадаўцоў у Redux

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

Для пачатку адчынем файл server.js. Знайдзем масіў handlers і дадамо ў яго яшчэ адну апрацоўку GET-запыту (пасля апрацоўкі GET для прадуктаў). Як бачыце яна практычна ідэнтычная:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

Запыт на серверы мы апрацавалі. Наступным этапам мы ў файле sellersSlice.js павінны напісаць thunk для атрымання дадзеных з сервера. Для гэтага імпартуем у яго client і createAsyncThunk:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

Цяпер мы будзем атрымліваць прадаўцоў з сервера, таму прыбярэм іх з initialState, пакінуўшы проста пустыя дужкі:

const initialState = []

А далей перад функцыяй sellersSlice створым наш thunk fetchSellers. Кліенту мы перададзім шлях, указаны намі на серверы:

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

Нам засталося толькі для sellersSlice стварыць дадатковы рэдьюсер. Абмяжуемся тут апрацоўкай паспяховага запыту. Усе экшэны, якія генеруюцца fetchSellers, будуць ідэнтычныя экшэнам fetchProducts:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

Нагадаю, што ў мінулы раз пры атрыманні прадуктаў мы змянялі бягучое значэнне стэйту. Тут мы скарысталіся некалькі іншым шляхам і проста вярнулі новае значэнне, так у createSlice таксама можна. Тым самым мы дабіліся двух мэт. Па-першае, мы атрымалі дадзеныя, а па-другое, цяпер у нас ёсць гарантыя, што ў спісе прадаўцоў не з'явіцца што-то яшчэ, бо мы цалкам перапісалі слайс значэннем action.payload.

Адчынiце ваша прыкладанне са студэнтамі. Адчынiце ў ім файл server.js, дадайце ў масіў handlers яшчэ адзін апрацоўшчык для GET-запыту выкладчыкаў.

А цяпер адчынiце файл teachersSlice.js. Зрабiце initialState пустым масівам, як паказана ў уроку. Перад функцыяй studentsSlice напішыце thunk fetchTeachers.

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