Verkopergegevens ophalen in Redux

Laten we onze applicatie met producten starten. We zien dat in de productkaarten de verkopers niet worden weergegeven. Laten we ze van de server halen en deze gegevens tonen. Hiervoor moeten we de reeds bekende reeks handelingen uitvoeren.

Laten we eerst het bestand server.js openen. Zoek de array handlers en voeg er nog een verwerking van een GET-request aan toe (na de verwerking van GET voor producten). Zoals u ziet is deze bijna identiek:

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

We hebben het request op de server verwerkt. De volgende stap is dat we in het bestand sellersSlice.js een thunk moeten schrijven om gegevens van de server op te halen. Importeer hiervoor client en createAsyncThunk:

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

Omdat we de verkopers nu van de server gaan halen, verwijderen we ze uit de initialState, en laten we alleen een lege array staan:

const initialState = []

En dan, voor de functie sellersSlice, maken we onze thunk fetchSellers aan. We geven aan de client het pad door dat we op de server hebben opgegeven:

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

Het enige wat we nog hoeven te doen is een extra reducer maken voor sellersSlice. Laten we ons hier beperken tot het afhandelen van een succesvolle request. Alle actions, gegenereerd door fetchSellers, zullen identiek zijn aan de actions van fetchProducts:

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

Ik herinner u eraan dat we de vorige keer bij het ophalen van producten de huidige waarde van de state wijzigden. Hier hebben we een iets andere aanpak gekozen en simpelweg een nieuwe waarde geretourneerd, dit kan ook in createSlice. Daarmee hebben we twee doelen bereikt. Ten eerste hebben we de gegevens opgehaald, en ten tweede hebben we nu de garantie dat er in de lijst met verkopers niets anders zal verschijnen, omdat we de slice volledig hebben overschreven met de waarde action.payload.

Open uw applicatie met studenten. Open daarin het bestand server.js, voeg in de array handlers nog een handler toe voor een GET-request voor docenten.

Open nu het bestand teachersSlice.js. Maak de initialState een lege array, zoals getoond in de les. Schrijf voor de functie studentsSlice de thunk fetchTeachers.

Voeg in de functie createSlice de extra reducer toe, beperk u tot het afhandelen van een succesvolle request.