Сатушылардың деректерін 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 функциясының алдында fetchSellers thunk-ын құрамыз. Клиентке біз серверде көрсеткен жолды береміз:

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 мәнімен толығымен қайта жаздық.

Студенттеріңізбен қолданбаны ашыңыз. Онда server.js файлын ашып, handlers массивіне оқытушылар үшін GET-сұрауын өңдеуді қосыңыз.

Енді teachersSlice.js файлын ашыңыз. initialState-ті сабақта көрсетілгендей бос массив етіп жасаңыз. studentsSlice функциясының алдында fetchTeachers thunk-ын жазыңыз.

createSlice функциясына қосымша редьюсерді толықтырыңыз, сәтті сұрауды өңдеумен шектеліңіз.