Envoi de données avec un thunk dans Redux

Lors de la dernière leçon, nous avons examiné le traitement d'une requête POST sur notre faux serveur. Maintenant, écrivons une fonction thunk qui enverra la requête au serveur.

Ouvrons notre application avec les produits, et dans celle-ci le fichier productsSlice.js. Maintenant, après le thunk fetchProducts, nous allons utiliser createAsyncThunk pour créer le thunk addProduct :

export const addProduct = createAsyncThunk()

Comme premier paramètre, nous passerons à createAsyncThunk 'products/addProduct', et comme deuxième paramètre une callback asynchrone, qui prendra un objet avec les données du nouveau produit :

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

Dans le code de cette callback, nous appellerons le client, en lui passant comme paramètres le chemin et l'objet contenant le produit, puis nous retournerons les données de la réponse :

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

Maintenant, regardons plus bas dans le code le champ reducers pour productsSlice. Auparavant, nous ajoutions un nouveau produit en utilisant le réducteur productAdded, dans lequel nous avions les méthodes reducer et prepare. Maintenant nous générons les données nécessaires sur le serveur et travaillons avec un thunk, donc nous allons retirer complètement ici le réducteur productAdded du code. Puis nous ajouterons dans la méthode extraReducers (à la fin de son code) un autre réducteur supplémentaire, qui en cas de requête réussie ajoutera dans le slice products le nouveau produit directement à partir du payload de l'action (souvenez-vous qu'un tel code n'est possible que grâce à l'inimitable createSlice) :

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Oui, au fait, n'oubliez pas de retirer nanoid des lignes d'importation, et productAdded de l'export des actions à la fin du fichier.

Ouvrez votre application avec les étudiants. Ouvrez dans celle-ci le fichier studentsSlice.js. À l'aide de createAsyncThunk, créez un autre thunk addStudent, qui enverra une requête POST au serveur pour ajouter un nouvel étudiant, comme montré dans la leçon.

Ensuite, plus bas, apportez les modifications pour studentsSlice : retirez complètement le réducteur studentAdded dans la propriété reducers. Et dans le champ extraReducers, ajoutez un réducteur supplémentaire, qui ajoutera un nouvel étudiant dans le slice students à partir du payload de l'action en cas de requête réussie, comme montré dans la leçon.