Recupero dei dati dei venditori in Redux

Avviamo la nostra applicazione con i prodotti. Possiamo vedere che nelle card dei prodotti non vengono visualizzati i venditori. Recuperiamoli dal server e visualizziamo questi dati. Per fare ciò dovremo eseguire una sequenza di azioni a noi già familiare.

Per iniziare, apriamo il file server.js. Troviamo l'array handlers e aggiungiamoci un altro gestore per la richiesta GET (dopo il gestore GET per i prodotti). Come potete vedere è praticamente identico:

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

Abbiamo gestito la richiesta sul server. Il prossimo passo è scrivere un thunk nel file sellersSlice.js per recuperare i dati dal server. Per farlo, importiamo client e createAsyncThunk al suo interno:

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

Ora recupereremo i venditori dal server, quindi li rimuoviamo da initialState, lasciando semplicemente parentesi vuote:

sellers/sellersSlice.jsconst initialState = []

E poi, prima della funzione sellersSlice creiamo il nostro thunk fetchSellers. Passeremo al client il percorso che abbiamo specificato sul server:

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

Ci resta solo da creare un reducer aggiuntivo per sellersSlice. Limitiamoci qui a gestire la richiesta con successo. Tutte le azioni generate da fetchSellers, saranno identiche alle azioni di fetchProducts:

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

Ricordo che la volta scorsa, quando abbiamo recuperato i prodotti, abbiamo modificato il valore corrente dello stato. Qui abbiamo utilizzato un approccio leggermente diverso e abbiamo semplicemente restituito un nuovo valore, anche in createSlice è possibile farlo. In questo modo abbiamo raggiunto due obiettivi. In primo luogo, abbiamo ottenuto i dati, e in secondo luogo, ora abbiamo la garanzia che nella lista dei venditori non apparirà nient'altro, dato che abbiamo completamente sostituito lo slice con il valore di action.payload.