Sélectionner une page

Voilà, mon projet est initialisé, mon store Redux connecté, je développe mon premier composant, et il ne se met pas à jour lorsque mon store Redux change ! … Au secours !

Après plusieurs recherches sur google, et plusieurs lectures sur Stack Overflow et Médium, j’étais toujours bloqué avec ce problème.

J’avoue que ce cas m’a retenu un petit bout de temps avant que je ne mette le doigt sur une solution concluante.

Contexte

J’ai crée un composant React A qui doit rendre un contenu en provenant d’une requête exécutée en fonction d’une valeur sélectionnée dans un menu déroulant d’un autre composant B.

Lorsque l’on sélectionne la valeur dans le menu déroulant du composant B, cette dernière est stockée dans le store Redux et le contenu du composant A doit recevoir cette mise à jour et se rafraîchir.

Problème

A chaque fois qu’une nouvelle valeur est sélectionnée dans le composant B, le store Redux est bien mis à jour mais le contenu du composant A n’est pas rafraîchi.

Solution

Pour résoudre ce problème j’ai utilisé un state dans le composant A en y stockant un paramètre isLoading (booléen) que j’initialise à true.

Dans la fonction render(), si la valeur est true :

  • j’affiche un loader (dans ce cas un composant de la bibliothèque Material UI)
  • je lance la requête qui va utiliser le paramètre stocké dans le store Redux et charger le contenu

Sinon j’affiche le résultat.

Lors du test, au premier chargement:

  • le loader est affiché
  • la requête qui charge le contenu est exécutée
  • le state est modifié en passant la valeur de isLoading à false
  • le contenu est rendu.

Pour que le contenu soit rendu à chaque changement de la valeur du menu déroulant, je modifie la valeur de isLoading à true dans la fonction composantWillReceiveProps (voir le cycle de vie d’un composant react).

Lorsque de nouvelles props vont être chargées du store Redux

  • le loader est affiché
  • la requête de chargement du contenu est exécutée
  • le contenu est mis à jour

Le code que j’ai utilisé :