Myyjien tietojen hankinta Reduxissa

Käynnistetään sovelluksemme tuotteilla. Näemme, että tuotekorteissa myyjiä ei näytetä. Haetaan heidän tietonsa palvelimelta ja näytetään nämä tiedot. Tätä varten meidän on suoritettava jo tuttu toimintosarja.

Aluksi avaa tiedosto server.js. Etsi taulukko handlers ja lisää siihen vielä yksi GET-pyynnön käsittely (tuotteiden GET-käsittelyn jälkeen). Kuten näette, se on melkein identtinen:

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

Olemme käsitelleet pyynnön palvelimella. Seuraavaksi meidän on tiedostossa sellersSlice.js kirjoitettava thunk tietojen hakemiseksi palvelimelta. Tätä varten tuomme siihen client ja createAsyncThunk:

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

Nyt haemme myyjät palvelimelta, joten poistamme heidät initialState:sta, jättäen vain tyhjät sulkeet:

const initialState = []

Ja sitten ennen funktiota sellersSlice luomme thunkimme fetchSellers. Asiakkaalle annamme polun, jonka määritsimme palvelimelle:

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

Meidän on vain luotava sellersSlice:lle ylimääräinen reducer. Rajoitamme tässä onnistuneen pyynnön käsittelyyn. Kaikki fetchSellers:n luomat actionit ovat identtisiä fetchProducts:n actioneiden kanssa:

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

Muistutan, että viime kerralla tuotteita haettaessa muutimme nykyistä tilan arvoa. Tässä käytimme hieman erilaista tapaa ja yksinkertaisesti palautimme uuden arvon, niin kuin createSlice:ssa myös voidaan. Näin saavutimme kaksi tavoitetta. Ensinnäkin saimme tiedot, ja toiseksi, nyt meillä on takuu, että myyjien listassa ei ilmesty mitään muuta, sillä korvasimme sliceen kokonaan arvolla action.payload.

Avaa opiskelijasovelluksesi. Avaa siellä tiedosto server.js, lisää taulukkoon handlers vielä yksi käsittelijä opettajien GET-pyynnölle.

Avaa nyt tiedosto teachersSlice.js. Tee initialState tyhjäksi taulukoksi, kuten oppitunnilla näytetään. Ennen funktiota studentsSlice kirjoita thunk fetchTeachers.

Funktiossa createSlice lisää ylimääräinen reducer, rajoitu onnistuneen pyynnön käsittelyyn.