Henting av selgerdata i Redux

La oss starte applikasjonen vår med produkter. Vi ser at i produktkortene vises ikke selgerne. La oss hente dem fra serveren og vise disse dataene. For å gjøre dette må vi gjennomføre den allerede kjente handlingssekvensen.

Først åpner vi filen server.js. Finner arrayet handlers og legger til en ny behandling av GET-forespørselen (etter behandling av GET for produkter). Som du ser er den nesten identisk:

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

Vi har behandlet forespørselen på serveren. Neste trinn er at vi i filen sellersSlice.js må skrive en thunk for å hente data fra serveren. For å gjøre dette importerer vi client og createAsyncThunk inn i den:

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

Nå skal vi hente selgere fra serveren, så vi fjerner dem fra initialState, og lar den være bare tomme parenteser:

const initialState = []

Og så før funksjonen sellersSlice oppretter vi vår thunk fetchSellers. Til klienten sender vi stien som er spesifisert av oss på serveren:

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

Alt som gjenstår for oss er å for sellersSlice opprette en ekstra reducer. La oss begrense oss her til behandling av vellykket forespørsel. Alle handlinger, generert av fetchSellers, vil være identiske med handlingene fra fetchProducts:

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

Jeg minner om at forrige gang vi hentet produkter endret vi den nåværende tilstandsverdien. Her brukte vi en litt annen tilnærming og bare returnerte en ny verdi, slik man også kan gjøre i createSlice. Dermed oppnådde vi to mål. For det første fikk vi data, og for det andre har vi nå en garanti for at selgerlisten ikke vil inneholde noe annet, fordi vi fullstendig overskrev slicen med verdien action.payload.

Åpne studentapplikasjonen din. Åpne filen server.js i den, legg til en ny behandler for GET-forespørsel for lærere i arrayet handlers.

Åpne nå filen teachersSlice.js. Gjør initialState til en tom array, slik som vist i leksjonen. Før funksjonen studentsSlice skriv thunken fetchTeachers.

I funksjonen createSlice skriv den ekstra reduceren, begrens deg til behandling av vellykket forespørsel.