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.

Pour simplifier la mise en place, les créateurs de Redux propose 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 react-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 le « reducer » généré.

La tranche de données contiendra deux inforamations :

• La liste des notifications, un tableau des données des notifications, une notification étant définie par les propriétés suivantes :
  • un identifiant, un nombre, obligatoire,
  • le contenue de la notification, une chaîne de caractères, obligatoire,
  • un type de notification, une chaîne de caractères, correspondant aux types d'affichage des messages de la bibliothèque MUI,
  • un drapeau identifiant si la notification est affichée, un booléen, une notification est créée visible.
• Le dernier (ou prochain) identifiant utilisé lors de la création d'une notification.

Le « reducer » devra supporter les actions suivantes en mettant à jour les données de la tranche de données :

• ajouter d'une notification,
• cacher une notification par son id,
• supprimer une notification par son id,
• supprimer toutes les notifications.

Vous avez vu l'an dernier qu'il était nécessaire dans un « reducer » de faire attention à l'immuabilité du magasin de données. RTK fournit 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 « reducer » par défaut afin de pouvoir l'utiliser dans le magasin de données, ainsi que les actions générées 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 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 NotificationsCenter 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, vous pourrez réutiliser le bouton du TP précédent en lui ajoutant 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 sur les boutons de la zone principale de l'application à l'aide du hook useDispatch.

Vous devriez obtenir un rendu similaire à l'illustration suivante :

Maintenant que votre magasin de données est fonctionnel, vous pouvez améliorer l'affichage des notifications.

Dans le composant NotificationsCenter, conformément aux recommandations du Material Design, vous n'afficherez que la première notification visible à l'aide d'un composant Snackbar.

L'utilisateur pourra cacher la notification à l'aide d'un clic ou de la touche d'échappement ou elle sera cachée automatiquement après un certain délai.

Vous ajouterez ensuite au composant NotificationsCenter, un panneau latéral permettant d'afficher toutes les notifications, 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 la supprimera et vous ajouterez aussi un bouton permettant de toutes les supprimer en une fois.

Ce panneau sera affiché lors du clic sur le bouton de notifications du pied de page de l'application.

Le composant NotificationsCenter, pourra recevoir comme props les informations permettant de personnaliser l'apparition des notifications, durée, position...

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 sont affichées, celles-ci sont affichées au-dessus du panneau. Vous corrigerez cette affichage en cachant toutes les notifications lorsque le panneau est ouvert.