Hämta säljardata i Redux

Låt oss starta vår applikation med produkter. Vi ser att säljarna inte visas i produktkorten. Låt oss hämta dem från servern och visa denna data. För att göra detta måste vi utföra den redan bekanta sekvensen av åtgärder.

Låt oss först öppna filen server.js. Låt oss hitta arrayen handlers och lägga till ytterligare en behandling av GET-förfrågan (efter behandling av GET för produkter). Som du ser är den nästan identisk:

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

Vi har behandlat förfrågan på servern. Nästa steg är att vi i filen sellersSlice.js måste skriva en thunk för att hämta data från servern. För att göra detta, importera client och createAsyncThunk i den:

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

Eftersom vi nu kommer att hämta säljare från servern, låt oss ta bort dem från initialState och bara lämna tomma parenteser:

const initialState = []

Och sedan, före funktionen sellersSlice, låt oss skapa vår thunk fetchSellers. Till klienten skickar vi sökvägen som vi angav på servern:

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

Allt som återstår för oss är att skapa en ytterligare reducer för sellersSlice. Låt oss begränsa oss här till att hantera en lyckad förfrågan. Alla actions som genereras av fetchSellers kommer att vara identiska med actions från fetchProducts:

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

Låt mig påminna er om att förra gången vi hämtade produkter ändrade vi det nuvarande tillståndsvärdet. Här har vi använt en något annorlunda väg och helt enkelt returnerat ett nytt värde, eftersom det också går att göra så i createSlice. På så sätt uppnådde vi två mål. För det första fick vi data, och för det andra har vi nu en garanti för att inget annat kommer att dyka upp i listan över säljare, eftersom vi helt och hållet skrev om slice med värdet action.payload.

Öppna din applikation med studenter. Öppna filen server.js i den, lägg till ytterligare en hanterare för GET-förfrågan om lärare i arrayen handlers.

Och öppna nu filen teachersSlice.js. Gör initialState till en tom array, som visas i lektionen. Skriv thunken fetchTeachers före funktionen studentsSlice.

Lägg till extra reducers i funktionen createSlice, begränsa dig till att hantera en lyckad förfrågan.