Müüjate andmete hankimine Reduxis

Käivitame oma tooterakenduse. Näeme, et tootekaartidel ei kuvata müüjaid. Hangime need serverist ja kuvame need andmed. Selleks peame tegema juba tuttava toimingute jada.

Alustuseks avame faili server.js. Leiame massiivi handlers ja lisame sinna veel ühe GET-päringu töötluse (pärast toodete GET-i töötlemist). Nagu näete, on see peaaegu identne:

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

Päringu serveris oleme töötlenud. Järgmise etapina peame failis sellersSlice.js kirjutama thunki andmete hankimiseks serverist. Selleks impordime sinna client ja createAsyncThunk:

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

Nüüd hankime müüjad serverist, seega eemaldame need initialState-st, jättes lihtsalt tühjad sulud:

const initialState = []

Seejärel enne funktsiooni sellersSlice loome oma thunki fetchSellers. Kliendile edastame tee, mille me määrasime serveril:

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

Jääb vaid luua sellersSlice-le täiendav redutser. Piirdume siin eduka päringu töötlemisega. Kõik fetchSellers poolt genereeritud actionid on identdsed fetchProducts actionitega:

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

Tuletan meelde, et viimasel korral tooteid hankides muutsime oleku praegust väärtust. Siin me kasutasime veidi teist teed ja lihtsalt tagastasime uue väärtuse, nii saab ka createSlice-s teha. Sellega saavutasime kaks eesmärki. Esiteks, saime andmed kätte, ja teiseks, nüüd on meil garantii, et müüjate nimekirjas ei teki midagi muud, sest me kirjutasime lahti kogu lõigu väärtusega action.payload.

Avage oma õpilaste rakendus. Avage selles fail server.js, lisage massiivi handlers veel üks töötleja õppejõudude GET-päringule.

Nüüd avage fail teachersSlice.js. Tehke initialState tühjaks massiiviks, nagu on näidatud tunnis. Enne funktsiooni studentsSlice kirjutage thunk fetchTeachers.

Funktsioonis createSlice kirjutage juurde täiendav redutser, piirduge eduka päringu töötlemisega.