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:

http.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:

import { 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:

const initialState = []

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

export 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:

const 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.

Aprite la vostra applicazione con gli studenti. Aprite al suo interno il file server.js, aggiungete nell'array handlers un altro gestore per la richiesta GET degli insegnanti.

E ora aprite il file teachersSlice.js. Rendete initialState un array vuoto, come mostrato nella lezione. Prima della funzione studentsSlice scrivete il thunk fetchTeachers.

Nella funzione createSlice aggiungete un reducer extra, limitatevi a gestire la richiesta con successo.