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:

api/server.jshttp.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:

sellers/sellersSlice.jsimport { 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:

sellers/sellersSlice.jsconst initialState = []

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

sellers/sellersSlice.jsexport 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:

sellers/sellersSlice.jsconst 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.