Obtention des données des vendeurs dans Redux

Lançons notre application avec les produits. Nous voyons que les vendeurs ne s'affichent pas dans les fiches produits. Récupérons-les depuis le serveur et affichons ces données. Pour cela, nous allons devoir effectuer la séquence d'actions déjà familière.

Pour commencer, ouvrons le fichier server.js. Trouvons le tableau handlers et ajoutons-y un autre traitement de requête GET (après le traitement GET pour les produits). Comme vous pouvez le voir, il est pratiquement identique :

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

Nous avons traité la requête côté serveur. À l'étape suivante, dans le fichier sellersSlice.js, nous devons écrire un thunk pour récupérer les données du serveur. Pour cela, importons client et createAsyncThunk dedans :

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

Maintenant que nous allons récupérer les vendeurs depuis le serveur, retirons-les de initialState, en laissant simplement des crochets vides :

const initialState = []

Ensuite, avant la fonction sellersSlice, créeons notre thunk fetchSellers. Nous transmettrons au client le chemin que nous avons spécifié sur le serveur :

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

Il ne nous reste plus qu'à créer un réducteur supplémentaire pour sellersSlice. Limitons-nous ici au traitement de la requête réussie. Toutes les actions générées par fetchSellers seront identiques aux actions de fetchProducts :

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

Je rappelle que la dernière fois, lors de la récupération des produits, nous modifiions la valeur actuelle de l'état. Ici, nous avons utilisé une approche légèrement différente et simplement retourné une nouvelle valeur, car dans createSlice c'est aussi possible. Ainsi, nous avons atteint deux objectifs. Premièrement, nous avons obtenu les données, et deuxièmement, nous avons maintenant la garantie que la liste des vendeurs ne contiendra rien d'autre, car nous avons entièrement remplacé le slice par la valeur de action.payload.

Ouvrez votre application avec les étudiants. Ouvrez le fichier server.js dedans, ajoutez un autre gestionnaire pour la requête GET des enseignants dans le tableau handlers.

Maintenant, ouvrez le fichier teachersSlice.js. Faites de initialState un tableau vide, comme montré dans la leçon. Avant la fonction studentsSlice, écrivez le thunk fetchTeachers.

Dans la fonction createSlice, ajoutez un réducteur supplémentaire, limitez-vous au traitement de la requête réussie.