Pridobivanje podatkov prodajalcev v Redux

Zaženimo našo aplikacijo s izdelki. Vidimo, da se v karticah z izdelki ne prikazujejo prodajalci. Pridobimo jih s strežnika in prikažimo te podatke. Za to bomo morali izvesti že znano zaporedje dejanj.

Za začetek odprimo datoteko server.js. Poiščimo matriko handlers in ji dodajmo še eno obdelavo GET-zahteve (po obdelavi GET za izdelke). Kot vidite, je skoraj identična:

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

Zahtevo na strežniku smo obdelali. Naslednji korak je, da v datoteki sellersSlice.js napišemo thunk za pridobivanje podatkov s strežnika. Za to ga uvozimo vanj client in createAsyncThunk:

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

Zdaj bomo pridobili prodajalce s strežnika, zato jih odstranimo iz initialState, pustimo preprosto prazne oklepaje:

sellers/sellersSlice.jsconst initialState = []

Nato pa pred funkcijo sellersSlice ustvarimo naš thunk fetchSellers. Stranki podamo pot, ki smo jo določili na strežniku:

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

Ostane nam le še, da za sellersSlice ustvarimo dodaten reduktor. Omejimo se tukaj na obdelavo uspešne zahteve. Vsa dejanja, ki jih generira fetchSellers, bodo enaka dejanjem fetchProducts:

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

Spomnim, da smo prejšnjič pri pridobivanju izdelkov spreminjali trenutno vrednost stanja. Tukaj smo uporabili nekoliko drugačen pristop in preprosto vrnili novo vrednost, saj je tudi v createSlice mogoče. S tem smo dosegli dva cilja. Prvič, pridobili smo podatke, in drugič, zdaj imamo zagotovilo, da se na seznamu prodajalcev ne bo pojavilo še kaj drugega, saj smo v celoti prepisali rezino z vrednostjo action.payload.