Modification de la structure du state dans Redux

La première étape que nous allons mettre en œuvre pour l'interaction de notre application Redux avec un serveur externe est la récupération des données qui y sont stockées au lancement de l'application. Mais auparavant, apportons quelques modifications à notre application.

Ouvrons notre application avec les produits, et dans celle-ci le fichier productsSlice.js. Remarquez la définition de initialState. Initialement, notre slice de produits productsSlice est un tableau contenant des objets (dans notre cas, il y en a deux) avec les données des produits. Premièrement, comme nous allons maintenant les charger depuis un serveur, nous devons les retirer de initialState. Deuxièmement, nous allons envoyer des requêtes API au serveur et il sera important de connaître leur statut. Compte tenu de ces deux points, retravaillons initialState. Que ce soit maintenant simplement un objet avec les champs products (initialement, il n'y aura aucune donnée ici, mais un tableau vide), status et error. Notre code pour initialState deviendra maintenant un peu plus court :

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Pour l'instant, nous avons défini le statut sur 'idle' (inactivité), car initialement nous n'envoyons aucune requête, mais en général, il changera et pourra prendre les valeurs 'loading', 'succeeded', 'failed'. N'oubliez pas que pour désigner le statut, vous pouvez choisir les noms qui vous conviendront.

Descendons plus bas dans le code. Suite au changement de initialState, nous devons également modifier le code, dans lequel nous travaillons avec ce state dans les fonctions réductrices. Regardons le code pour productAdded :

state.push(action.payload)

Maintenant, nous ajouterons les nouveaux produits non pas simplement dans le state pour les produits, mais dans sa propriété state.products. Par conséquent, remplaçons la ligne ci-dessus par :

state.products.push(action.payload)

En conséquence, effectuons les mêmes modifications pour le réducteur reactionClicked. Au lieu de :

const currentProduct = state.find((product) => product.id === productId)

Ce sera maintenant :

const currentProduct = state.products.find((product) => product.id === productId)

Remplacez vous-même state par state.products dans le code du réducteur productUpdated.

Ouvrez votre application avec les étudiants. Ouvrez dans celle-ci le fichier studentsSlice.js. Que votre initialState ait maintenant trois propriétés : students, status, error - retravaillez-le, comme montré dans la leçon.

Apportez les modifications correspondantes plus bas dans le code. Remplacez state par state.students dans le code de vos trois fonctions réductrices.