Eladói adatok lekérése Reduxban

Indítsuk el termékeink alkalmazását. Látjuk, hogy a termék kártyákon nem jelennek meg az eladók. Kérjük le őket a szerverről és jelenítsük meg ezeket az adatokat. Ehhez ismerős műveletsort kell végrehajtanunk.

Kezdetként nyissuk meg a server.js fájlt. Keressük meg a handlers tömböt és adjunk hozzá még egy GET kérés kezelést (a termékek GET kezelése után). Amint látják, gyakorlatilag azonos:

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

A kérést a szerveren kezeltük. Következő lépésben a sellersSlice.js fájlban thunk-ot kell írnunk az adatok szerverről történő lekéréséhez. Ehhez importáljuk bele a client és a createAsyncThunk-ot:

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

Mostantól a szerverről fogjuk lekérni az eladókat, ezért távolítsuk el őket a initialState-ből, hagyjuk csak üres zárójeleket:

const initialState = []

Ezután a sellersSlice függvény elé hozzuk létre a thunk-unkat fetchSellers. A kliensnek átadjuk a szerveren megadott útvonalat:

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

Már csak a sellersSlice számára létre kell hoznunk egy extra reducert. Itt korlátozzuk magunkat a sikeres kérés feldolgozására. A fetchSellers által generált összes action megegyezik a fetchProducts action-jeivel:

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

Emlékeztetőül, legutóbb a termékek lekérésekor módosítottuk az állapot aktuális értékét. Itt mi kissé más utat választottunk és egyszerűen visszaadtunk egy új értéket, mivel a createSlice-ben ez is lehetséges. Ezzel két célt értünk el. Először is, megkaptuk az adatokat, másodszor pedig mostantól garantált, hogy az eladók listájában nem fog megjelenni semmi más, hiszen teljesen felülírtuk a slice-ot a action.payload értékkel.

Nyissa meg a hallgatói alkalmazását. Nyissa meg benne a server.js fájlt, adja hozzá a handlers tömbhöz még egy kezelőt az oktatók GET kéréséhez.

Most nyissa meg a teachersSlice.js fájlt. Tegye a initialState-t üres tömbbé, ahogyan a leckében is látható. A studentsSlice függvény előtt írja meg a thunk-ot fetchTeachers.

A createSlice függvényben egészítse ki az extra reducert, korlátozódjon a sikeres kérés feldolgozására.