Pardavėjų duomenų gavimas Redux

Paleiskime savo produktų programą. Matome, kad produktų kortelėse nerodomi pardavėjai. Gaukim juos iš serverio ir pateikime šiuos duomenis. Tam mums teks atlikti jau pažįstamą veiksmų seką.

Pirmiausia atidarykime failą server.js. Raskime massyvą handlers ir pridėkime į jį dar vieną GET užklausos apdorojimą (po produktų GET apdorojimo). Kaip matote, jis yra beveik identiškas:

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

Užklausą serveryje apdorojome. Kitu etape faile sellersSlice.js turime parašyti thunk duomenims gauti iš serverio. Tam importuokime į jį client ir createAsyncThunk:

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

Dabar pardavėjus gausime iš serverio, todėl pašalinkime juos iš initialState, palikdami tiesiog tuščius skliaustus:

const initialState = []

O tada prieš funkciją sellersSlice sukurkime savo thunk fetchSellers. Klientui perduosime kelią, nurodytą mums serveryje:

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

Mums belieka tik sellersSlice sukurti papildomą reducerį. Apsiribokime čia sėkmingos užklausos apdorojimu. Visi veiksmai, generuojami fetchSellers, bus identiški fetchProducts veiksmams:

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

Primenu, kad paskutinį kartą gaunant produktus mes keitėme esamą būsenos reikšmę. Čia mes pasinaudojome kiek kitokiu keliu ir tiesiog grąžinome naują reikšmę, taip ir createSlice taip pat galima. Taip pasiekėme du tikslus. Pirma, gavome duomenis, o antra, dabar turime garantiją, kad pardavėjų sąraše ne atsiras kažkas papildomai, nes mes visiškai perrašėme slice reikšme action.payload.

Atidarykite savo studentų programą. Atidarykite joje failą server.js, pridėkite į masyvą handlers dar vieną dorotuvą dėstytojų GET užklausai.

O dabar atidarykite failą teachersSlice.js. Padarykite initialState tuščiu masyvu, kaip parodyta pamokoje. Prieš funkciją studentsSlice parašykite thunk fetchTeachers.

Funkcijoje createSlice parašykite papildomą reducerį, apsiribokite sėkmingos užklausos apdorojimu.