Získavanie údajov predajcov v Reduxe

Spustíme našu aplikáciu s produktmi. Vidíme, že na kartách produktov sa nezobrazujú predajcovia. Získajme ich zo servera a zobrazme tieto údaje. Na to budeme musieť vykonať už známu postupnosť akcií.

Na začiatok otvorme súbor server.js. Nájdime pole handlers a pridajme doň ešte jedno spracovanie GET požiadavky (po spracovaní GET pre produkty). Ako vidíte, je takmer identické:

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

Požiadavku na serveri sme spracovali. Ďalšou fázou musíme v súbore sellersSlice.js napísať thunk na získanie údajov zo servera. Na to importujeme doň client a createAsyncThunk:

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

Teraz budeme získavať predajcov zo servera, preto ich odstránime z initialState, pričom necháme len prázdne zátvorky:

const initialState = []

A potom pred funkciou sellersSlice vytvorme náš thunk fetchSellers. Klientovi odovzdáme cestu, ktorú sme zadali na serveri:

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

Ostáva nám len pre sellersSlice vytvoriť dodatočný reducer. Obmedzme sa tu na spracovanie úspešnej požiadavky. Všetky akcie generované fetchSellers budú identické s akciami fetchProducts:

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

Pripomínam, že minule pri získavaní produktov sme menili aktuálnu hodnotu stavu. Tu sme použili trochu inú cestu a jednoducho sme vrátili novú hodnotu, takto sa to dá urobiť aj v createSlice. Tým sme dosiahli dva ciele. Po prvé, získali sme údaje, a po druhé, teraz máme záruku, že v zozname predajcov sa neobjaví nič ďalšie, pretože sme úplne prepísali slice hodnotou action.payload.

Otvorte svoju aplikáciu so študentmi. Otvorte v nej súbor server.js, pridajte do poľa handlers ešte jeden spracovateľ pre GET požiadavku učiteľov.

A teraz otvorte súbor teachersSlice.js. Nastavte initialState ako prázdne pole, ako je ukázané v lekcii. Pred funkciou studentsSlice napíšte thunk fetchTeachers.

Vo funkcii createSlice dopíšte dodatočný reducer, obmedzte sa na spracovanie úspešnej požiadavky.