Preuzimanje podataka o prodavcima u Redux-u

Pokrenimo našu aplikaciju sa proizvodima. Vidimo da se u karticama sa proizvodima ne prikazuju prodavci. Preuzmimo ih sa servera i prikažimo te podatke. Za ovo ćemo morati da sprovedemo već poznatu sekvencu radnji.

Za početak otvorimo fajl server.js. Pronađimo niz handlers i dodajmo u njega još jednu obradu GET-zahteva (posle obrade GET za proizvode). Kao što vidite ona je praktično identična:

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

Zahtev na serveru smo obradili. Sledećim korakom u fajlu sellersSlice.js treba da napišemo thunk za preuzimanje podataka sa servera. Za ovo uveziemo u njega client i createAsyncThunk:

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

Sada ćemo preuzimati prodavce sa servera, pa ćemo ih ukloniti iz initialState, ostavivši samo prazne zagrade:

sellers/sellersSlice.jsconst initialState = []

A zatim pre funkcije sellersSlice kreirajmo naš thunk fetchSellers. Klijentu prosledimo putanju, koju smo naveli na serveru:

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

Ostalo nam je samo da za sellersSlice kreiramo dodatni reduktor. Ograničimo se ovde obradom uspešnog zahteva. Sve akcije, koje generiše fetchSellers, biće identične akcijama fetchProducts:

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

Podsetiću, da smo prošli put pri preuzimanju proizvoda menjali trenutnu vrednost stanja. Ovde smo koristili nešto drugačiji pristup i jednostavno vratili novu vrednost, jer je i u createSlice to moguće. Time smo postigli dva cilja. Prvo, dobili smo podatke, a drugo, sada imamo garanciju da se u listi prodavaca ne pojavi nešto drugo, jer smo potpuno prepisali slice vrednošću action.payload.