Vous allez poursuivre le TP précédent en ajoutant une bibliothèque de gestion des données de l'application. Avec comme cadre d'utilisation la mise en place de notifications, permettant à l'utilisateur d'être informé des actions réalisées en arrière-plan.
Les notes des TP seront obtenues à partir de vos dépôts Git, vous devrez donc prendre grand soin de la qualité de ces dépôts et de leurs « commits ».
De manière similaire, les descriptions de vos « commits » devront être claires et informatives, afin de permettre l'évaluation de la progression de votre travail.
Redux est une solution largement utilisée dans l'écosystème React, cependant sa mise en place peut être un peu complexe de prime abord. Et elle nécessite de nombreux choix sur l'organisation et la gestion des données. De plus Redux permet d'ajouter des greffons permettant de simplifier certains aspects de son utilisation et il n'est pas toujours évident de faire les choix techniques d'utiliser des modules tiers.
Pour simplifier la mise en place, les créateurs de Redux proposent une boîte à outil fournissant des outils simplifiant l'écriture du gestionnaire de données et fournissant un ensemble de greffons communément reconnus pour simplifier le travail des développeurs.
Vous installerez donc la boîte à outils Redux Toolkit (RTK) conjointement au paquet permettant l'intégration de Redux dans React.
Afin d'améliorer les performances de l'application et simplifier la gestion des gros magasins de données, RTK propose d'organiser le magasin de données en tranches indépendantes.
Vous aller donc mettre en place une tranche de données, dans le fichier « src/store/slices/notifications.js », permettant de gérer les notifications de l'application.
RTK vous laisse assez de liberté pour l'organisation du code des magasins de données. Cependant, la base de code peu rapidement devenir compliquée si elle n'est pas un peu organisée. Dans le cadre du TP vous définirez toutes les tranches de données dans un sous répertoire « src/store/slices » et ces tranches de données seront ensuite agréger dans un magasin unique exposé dans le fichier « src/store/index.js ».
Vous commencerez donc par créer la tranche de données à l'aide de la fonction createSlice dans le fichier « src/store/slices/notifications.js » qui exposera par défaut la tranche de données généré.
Celle-ci contiendra deux informations :
Le « reducer » permet de définir les actions supportées pour intéragir avec le magasin de données. Dans un premier temps, vous ne proposerez qu'une action permettant de créer une notification.
Le principe des « reducers » impose de faire attention à l'immuabilité du magasin de données afin de garantir l'intégrité des données, en effet les « reducers » doivent être des fonctions pures. Pour simplifier la gestion des magasins de données, par défaut, RTK utilise Immer comme outil permettant de prendre soin de l'immuabilité des données à votre place. Vous pouvez donc l'utilisé pour simplifier l'écriture de vos « reducers ».
Vous penserez à exporter votre tranche de données par défaut afin de pouvoir l'utiliser dans le magasin de données, ainsi que l'action générée par la fonction createSlice afin de pouvoir les utiliser dans les composants de l'application.
Maintenant que votre première tranche de données est créée, vous allez créer le magasin de données de l'application dans le fichier « src/store/index.js ». Vous utiliserez la fonction configureStore pour créer le magasin que vous exporterez par défaut.
Vous pourrez ensuite utiliser le composant Provider de la bibliothèque react-redux afin de rendre disponible votre magasin de données à l'ensemble des composants de votre application.
Vous allez créer un nouveau composant NotificationsButton permettant de gérer l'affichage des notifications dans l'application.
Ce composant se composera pour l'instant d'un bouton d'affichage des notifications, celui-ci comportera un badge affichant le nombre de notifications de l'application.
Pour obtenir le nombre de notifications, vous récupérerez le tableau de notification à l'aide du hook useSelector.
Et enfin, vous pouvez ajouter une fonction provoquant la création de notifications lors du clic sur l'un des boutons de la zone principale de l'application à l'aide du hook useDispatch. Chaque bouton créera une notification de type différent.
Vous devriez obtenir un rendu similaire à l'illustration suivante :
NotificationsButton.
Maintenant que votre magasin de données est fonctionnel, vous pouvez améliorer l'affichage des notifications.
Vous allez créer un nouveau composant Toast dont le rôle sera d'afficher les notifications de l'application lors de leur création. Conformément aux recommandations du Material Design, vous n'afficherez que la première notification visible à l'aide des composants Snackbar et Alert.
Un clic sur le toast ou l'utilisation de la touche d'échappement provoquera la disparition du toast. Dans tous les cas, elle disparaîtra automatiquement après un certain délai, que vous pourrez recevoir sous forme de props pour rendre votre composant plus configurable. Le toast proposera aussi la suppression directe de la notification à l'aide du clic sur la croix du toast.
Pour répondre à ces actions, vous ajouterez deux nouveaux « reducers » à la tranche de données des notifications :
id,id,
Vous pourrez ensuite créer les fonctions de rappel « dispatchant » ces actions dans le composant NotificationsButton et vous pourrez les transmettre au composant Toast à l'aide de props.
Toast.
Toast au bouton de notifications.
Comme vous pouvez le constater avec sur le badge du bouton de notifications à la fin de la vidéo précédente, des notifications peuvent ne plus être affichées, mais être encore présentes dans l'application.
Vous allez ajouter un panneau latéral permettant d'afficher toutes les notifications de l'application, même celles cachées. Vous prendrez soin de gérer le défilement lorsqu'il y a de nombreuses notifications. Un clic sur une notification, dans ce panneau, la supprimera. Les notifications seront encore affichées à l'aide du composant Alert.
Pour améliorer l'ergonomie de votre application, vous ajouterez aussi un bouton permettant à l'utilisateur de supprimer toutes les notifications en une fois.
Ce panneau sera affiché lors du clic sur le bouton de notifications du pied de page de l'application.
Vous devriez obtenir un rendu similaire à l'illustration suivante :
Si vous avez suivi le TP, vous devriez remarquer que si vous ouvrez le panneau latéral en même que des notifications (Toast) sont affichées, celles-ci sont affichées au-dessus du panneau. Vous corrigerez cet affichage en cachant toutes les notifications lorsque le panneau est ouvert.
De même, lors de la suppression de toutes les notifications, il serait judicieux de cacher le panneau latéral.