Pridobivanje podatkov prodajalcev v Redux

Zaženimo našo aplikacijo s izdelki. Vidimo, da se v karticah z izdelki ne prikazujejo prodajalci. Pridobimo jih s strežnika in prikažimo te podatke. Za to bomo morali izvesti že znano zaporedje dejanj.

Za začetek odprimo datoteko server.js. Poiščimo matriko handlers in ji dodajmo še eno obdelavo GET-zahteve (po obdelavi GET za izdelke). Kot vidite, je skoraj identična:

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

Zahtevo na strežniku smo obdelali. Naslednji korak je, da v datoteki sellersSlice.js napišemo thunk za pridobivanje podatkov s strežnika. Za to ga uvozimo vanj client in createAsyncThunk:

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

Zdaj bomo pridobili prodajalce s strežnika, zato jih odstranimo iz initialState, pustimo preprosto prazne oklepaje:

const initialState = []

Nato pa pred funkcijo sellersSlice ustvarimo naš thunk fetchSellers. Stranki podamo pot, ki smo jo določili na strežniku:

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

Ostane nam le še, da za sellersSlice ustvarimo dodaten reduktor. Omejimo se tukaj na obdelavo uspešne zahteve. Vsa dejanja, ki jih generira fetchSellers, bodo enaka dejanjem fetchProducts:

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

Spomnim, da smo prejšnjič pri pridobivanju izdelkov spreminjali trenutno vrednost stanja. Tukaj smo uporabili nekoliko drugačen pristop in preprosto vrnili novo vrednost, saj je tudi v createSlice mogoče. S tem smo dosegli dva cilja. Prvič, pridobili smo podatke, in drugič, zdaj imamo zagotovilo, da se na seznamu prodajalcev ne bo pojavilo še kaj drugega, saj smo v celoti prepisali rezino z vrednostjo action.payload.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko server.js, dodajte v matriko handlers še en obdelovalnik za GET-zahtevo učiteljev.

Zdaj pa odprite datoteko teachersSlice.js. Nastavite initialState kot prazen niz, kot je prikazano v lekciji. Pred funkcijo studentsSlice napišite thunk fetchTeachers.

V funkciji createSlice dopolnite dodaten reduktor, omejite se na obdelavo uspešne zahteve.