Získávání dat prodejců v Reduxu

Spusťme naši aplikaci s produkty. Vidíme, že na kartách produktů se nezobrazují prodejci. Získejme je ze serveru a zobrazme tato data. K tomu budeme muset provést již známou posloupnost akcí.

Nejprve otevřeme soubor server.js. Najdeme pole handlers a přidejme do něj další zpracování GET požadavku (po zpracování GET pro produkty). Jak vidíte, je téměř identické:

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

Požadavek na serveru jsme zpracovali. Dalším krokem musíme v souboru sellersSlice.js napsat thunk pro získání dat ze serveru. K tomu jej naimportujeme do client a createAsyncThunk:

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

Nyní budeme získávat prodejce ze serveru, proto je odstraníme z initialState, ponecháme jen prázdné závorky:

const initialState = []

A poté před funkcí sellersSlice vytvoříme náš thunk fetchSellers. Klientovi předáme cestu, kterou jsme zadali na serveru:

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

Zbývá nám pouze pro sellersSlice vytvořit další reduktor. Omezte se zde na zpracování úspěšného požadavku. Všechny akce generované fetchSellers budou identické akcím fetchProducts:

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

Připomínám, že minule při získávání produktů jsme měnili aktuální hodnotu stavu. Zde jsme využili poněkud odlišnou cestu a jednoduše jsme vrátili novou hodnotu, tak v createSlice to také lze. Tím jsme dosáhli dvou cílů. Za prvé, získali jsme data, a za druhé, nyní máme záruku, že v seznamu prodejců se ne objeví nic dalšího, protože jsme kompletně přepsali slice hodnotou action.payload.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor server.js, přidejte do pole handlers další handler pro GET požadavek učitelů.

A nyní otevřete soubor teachersSlice.js. Nastavte initialState jako prázdné pole, jak je ukázáno v lekci. Před funkcí studentsSlice napište thunk fetchTeachers.

Ve funkci createSlice doplňte další reduktor, omezte se na zpracování úspěšného požadavku.