Pobieranie danych sprzedawców w Redux

Uruchommy naszą aplikację z produktami. Widzimy, że w kartach z produktami nie są wyświetlani sprzedawcy. Pobierzmy ich z serwera i wyświetlmy te dane. W tym celu będziemy musieli wykonać już znaną sekwencję czynności.

Na początku otwórzmy plik server.js. Znajdźmy tablicę handlers i dodajmy do niej jeszcze jedno obsłużenie żądania GET (po obsłużeniu GET dla produktów). Jak widać, jest ona praktycznie identyczna:

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

Żądanie na serwerze obsłużyliśmy. Kolejnym etapem w pliku sellersSlice.js powinniśmy napisać thunk do pobierania danych z serwera. W tym celu zaimportujmy do niego client i createAsyncThunk:

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

Teraz będziemy pobierać sprzedawców z serwera, dlatego usuniemy ich z initialState, pozostawiając po prostu puste nawiasy:

const initialState = []

A następnie przed funkcją sellersSlice stwórzmy nasz thunk fetchSellers. Klientowi przekażemy ścieżkę określoną przez nas na serwerze:

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

Pozostało nam tylko dla sellersSlice utworzyć dodatkowy reducer. Ograniczmy się tutaj do obsłużenia udanego żądania. Wszystkie akcje, generowane przez fetchSellers, będą identyczne jak akcje fetchProducts:

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

Przypomnę, że ostatnio przy pobieraniu produktów zmienialiśmy bieżącą wartość stanu. Tutaj skorzystaliśmy z nieco innej ścieżki i po prostu zwróciliśmy nową wartość, tak też w createSlice można. Tym samym osiągnęliśmy dwa cele. Po pierwsze, otrzymaliśmy dane, a po drugie, teraz mamy gwarancję, że w liście sprzedawców nie pojawi się nic więcej, ponieważ całkowicie nadpisaliśmy slice wartością action.payload.

Otwórz swoją aplikację ze studentami. Otwórz w niej plik server.js, dodaj do tablicy handlers jeszcze jedną obsługę żądania GET dla wykładowców.

A teraz otwórz plik teachersSlice.js. Uczyń initialState pustą tablicą, jak pokazano na lekcji. Przed funkcją studentsSlice napisz thunk fetchTeachers.

W funkcji createSlice dopisz dodatkowy reducer, ogranicz się do obsłużenia udanego żądania.