Získavanie údajov predajcov v Reduxe

Spustíme našu aplikáciu s produktmi. Vidíme, že na kartách produktov sa nezobrazujú predajcovia. Získajme ich zo servera a zobrazme tieto údaje. Na to budeme musieť vykonať už známu postupnosť akcií.

Na začiatok otvorme súbor server.js. Nájdime pole handlers a pridajme doň ešte jedno spracovanie GET požiadavky (po spracovaní GET pre produkty). Ako vidíte, je takmer identické:

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

Požiadavku na serveri sme spracovali. Ďalšou fázou musíme v súbore sellersSlice.js napísať thunk na získanie údajov zo servera. Na to importujeme doň client a createAsyncThunk:

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

Teraz budeme získavať predajcov zo servera, preto ich odstránime z initialState, pričom necháme len prázdne zátvorky:

sellers/sellersSlice.jsconst initialState = []

A potom pred funkciou sellersSlice vytvorme náš thunk fetchSellers. Klientovi odovzdáme cestu, ktorú sme zadali na serveri:

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

Ostáva nám len pre sellersSlice vytvoriť dodatočný reducer. Obmedzme sa tu na spracovanie úspešnej požiadavky. Všetky akcie generované fetchSellers budú identické s akciami fetchProducts:

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

Pripomínam, že minule pri získavaní produktov sme menili aktuálnu hodnotu stavu. Tu sme použili trochu inú cestu a jednoducho sme vrátili novú hodnotu, takto sa to dá urobiť aj v createSlice. Tým sme dosiahli dva ciele. Po prvé, získali sme údaje, a po druhé, teraz máme záruku, že v zozname predajcov sa neobjaví nič ďalšie, pretože sme úplne prepísali slice hodnotou action.payload.