Müüjate andmete hankimine Reduxis

Käivitame oma tooterakenduse. Näeme, et tootekaartidel ei kuvata müüjaid. Hangime need serverist ja kuvame need andmed. Selleks peame tegema juba tuttava toimingute jada.

Alustuseks avame faili server.js. Leiame massiivi handlers ja lisame sinna veel ühe GET-päringu töötluse (pärast toodete GET-i töötlemist). Nagu näete, on see peaaegu identne:

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

Päringu serveris oleme töötlenud. Järgmise etapina peame failis sellersSlice.js kirjutama thunki andmete hankimiseks serverist. Selleks impordime sinna client ja createAsyncThunk:

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

Nüüd hankime müüjad serverist, seega eemaldame need initialState-st, jättes lihtsalt tühjad sulud:

sellers/sellersSlice.jsconst initialState = []

Seejärel enne funktsiooni sellersSlice loome oma thunki fetchSellers. Kliendile edastame tee, mille me määrasime serveril:

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

Jääb vaid luua sellersSlice-le täiendav redutser. Piirdume siin eduka päringu töötlemisega. Kõik fetchSellers poolt genereeritud actionid on identdsed fetchProducts actionitega:

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

Tuletan meelde, et viimasel korral tooteid hankides muutsime oleku praegust väärtust. Siin me kasutasime veidi teist teed ja lihtsalt tagastasime uue väärtuse, nii saab ka createSlice-s teha. Sellega saavutasime kaks eesmärki. Esiteks, saime andmed kätte, ja teiseks, nüüd on meil garantii, et müüjate nimekirjas ei teki midagi muud, sest me kirjutasime lahti kogu lõigu väärtusega action.payload.