Verkryg van Data Verkopers in Redux

Laat ons ons toepassing met produkte begin. Ons sien dat die kaarte met produkte nie die verkopers uitwys nie. Kom ons verkry hulle van die bediener en vertoon hierdie data. Om dit te doen sal ons die reeds bekende reeks aksies moet uitvoer.

Om te begin, laat ons die lêer server.js oopmaak. Soek die skikking handlers en voeg nog 'n verwerking van GET-versoek daarin by (na die verwerking van GET vir produkte). Soos jy kan sien is dit feitlik identies:

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

Ons het die versoek op die bediener verwerk. Die volgende stap is om in die lêer sellersSlice.js 'n thunk te skryf om data van die bediener te verkry. Om dit te doen, importeer ons client en createAsyncThunk daarin:

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

Nou sal ons verkopers van die bediener kry, so laat ons hulle uit initialState verwyder, en net leë hakies agterlaat:

const initialState = []

En dan, voor die funksie sellersSlice, skep ons ons thunk fetchSellers. Aan die kliënt gee ons die pad wat ons op die bediener gespesifiseer het:

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

Ons hoef net vir sellersSlice 'n addisionele reducer te skep. Ons sal ons hier beperk tot die verwerking van 'n suksesvolle versoek. Alle aksies, gegenereer deur fetchSellers, sal identies wees aan die aksies van fetchProducts:

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

Onthou, die vorige keer toe ons produkte gekry het, het ons die huidige waarde van die staat verander. Hier het ons 'n ietwat ander pad gevolg en eenvoudig die nuwe waarde teruggegee, want dit kan ook in createSlice gedoen word. So het ons twee doelwitte bereik. Eerstens het ons die data verkry, en tweedens, nou het ons die versekering dat daar niks anders in die lys van verkopers sal verskyn nie, aangesien ons die slice volledig herskryf het met die waarde action.payload.

Maak jou toepassing met studente oop. Maak die lêer server.js daarin oop, voeg in die skikking handlers nog 'n verwerker vir die GET-versoek van onderwysers by.

En nou, maak die lêer teachersSlice.js oop. Maak initialState 'n leë skikking, soos in die les gewys. Voor die funksie studentsSlice, skryf die thunk fetchTeachers.

Voeg in die funksie createSlice die addisionele reducer by, beperk jou tot die verwerking van 'n suksesvolle versoek.