Eladói adatok lekérése Reduxban

Indítsuk el termékeink alkalmazását. Látjuk, hogy a termék kártyákon nem jelennek meg az eladók. Kérjük le őket a szerverről és jelenítsük meg ezeket az adatokat. Ehhez ismerős műveletsort kell végrehajtanunk.

Kezdetként nyissuk meg a server.js fájlt. Keressük meg a handlers tömböt és adjunk hozzá még egy GET kérés kezelést (a termékek GET kezelése után). Amint látják, gyakorlatilag azonos:

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

A kérést a szerveren kezeltük. Következő lépésben a sellersSlice.js fájlban thunk-ot kell írnunk az adatok szerverről történő lekéréséhez. Ehhez importáljuk bele a client és a createAsyncThunk-ot:

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

Mostantól a szerverről fogjuk lekérni az eladókat, ezért távolítsuk el őket a initialState-ből, hagyjuk csak üres zárójeleket:

sellers/sellersSlice.jsconst initialState = []

Ezután a sellersSlice függvény elé hozzuk létre a thunk-unkat fetchSellers. A kliensnek átadjuk a szerveren megadott útvonalat:

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

Már csak a sellersSlice számára létre kell hoznunk egy extra reducert. Itt korlátozzuk magunkat a sikeres kérés feldolgozására. A fetchSellers által generált összes action megegyezik a fetchProducts action-jeivel:

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

Emlékeztetőül, legutóbb a termékek lekérésekor módosítottuk az állapot aktuális értékét. Itt mi kissé más utat választottunk és egyszerűen visszaadtunk egy új értéket, mivel a createSlice-ben ez is lehetséges. Ezzel két célt értünk el. Először is, megkaptuk az adatokat, másodszor pedig mostantól garantált, hogy az eladók listájában nem fog megjelenni semmi más, hiszen teljesen felülírtuk a slice-ot a action.payload értékkel.