Hentning af sælgerdata i Redux

Lad os starte vores applikation med produkter. Vi kan se, at sælgere ikke bliver vist i produktkortene. Lad os hente dem fra serveren og vise disse data. For at gøre dette bliver vi nødt til at gennemføre den allerede velkendte handlingssekvens.

Til at starte med, åbner vi filen server.js. Finder arrayet handlers og tilføjer endnu en behandling af GET-anmodningen (efter behandlingen af GET for produkter). Som I kan se, er den næsten identisk:

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

Vi har behandlet anmodningen på serveren. Næste trin er, at vi i filen sellersSlice.js skal skrive en thunk for at hente data fra serveren. For at gøre dette importerer vi client og createAsyncThunk i den:

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

Nu henter vi sælgere fra serveren, så vi fjerner dem fra initialState og efterlader kun tomme parenteser:

const initialState = []

Og derefter, før funktionen sellersSlice, opretter vi vores thunk fetchSellers. Til client sender vi stien, som vi har angivet på serveren:

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

Tilbage er kun at oprette en ekstra reducer for sellersSlice. Lad os begrænse os til at håndtere en succesfuld anmodning. Alle actions, genereret af fetchSellers, vil være identiske med actions fra fetchProducts:

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

Jeg minder om, at sidste gang vi hentede produkter, ændrede vi den nuværende stateværdi. Her brugte vi en lidt anden tilgang og returnerede simpelthen en ny værdi, da dette også er muligt i createSlice. Dermed opnåede vi to mål. For det første fik vi data, og for det andet har vi nu garanti for, at sælgerlisten ikke kommer til at indeholde noget andet, fordi vi fuldstændigt overskrev slicen med værdien action.payload.

Åbn din applikation med studerende. Åbn filen server.js i den, tilføj endnu en handler for GET-anmodninger om lærere i arrayet handlers.

Og nu åbner du filen teachersSlice.js. Gør initialState til et tomt array, som vist i lektionen. Før funktionen studentsSlice, skriv thunk'en fetchTeachers.

I funktionen createSlice, tilføj den ekstra reducer, begræns dig til at håndtere den succesfulde anmodning.