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 мааниси менен кайра жазып алдык.

Студенттериңиз менен колдонмоңузду ачыңыз. Андагы server.js файлын ачып, handlers массивине мугалимдер үчүн дагы бир GET-сураныш иштетүүчүсүн кошуңуз.

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

createSlice функциясына кошумча редьюсерди жазып кошуңуз, ийгиликтүү суранышты иштетүү менен чектелиңиз.