Les contextes et le pattern Provider/Consumer Contextes

Dans la dernière section de ce chapitre nous allons voir un pattern que vous avez déjà utilisé sans forcément le savoir au fil de ce livre, il s’agit du pattern Provider/Consumer. Le but est de partager des informations entre les composants sans que celles-ci ne soient passées par les propriétés. Cela vous rappelle quelque chose ? C’est ce qui avait motivé l’utilisation de Redux dans le chapitre Concevoir une application avec Redux.

Aujourd’hui, React 16 fournit un outil permettant de mettre en place une gestion d’informations partagées sans avoir besoin de passer par Redux, ce qui peut être très pratique pour de petites applications, ne nécessitant pas tous les apports de Redux, comme des actions asynchrones. Cette fonctionnalité, ce sont les contextes.

Commençons par imaginer la situation suivante : notre application doit afficher divers composants graphiques avec une charte de couleurs précises (un arrière-plan et une couleur pour le texte). Nous souhaitons que les composants aient accès à ces couleurs sans passer un objet contenant ces couleurs en propriété dans toute la hiérarchie des composants.

On peut également imaginer que nous souhaitons que cette gestion de thèmes puisse être réutilisée dans plusieurs applications, qui n’utiliseraient pas forcément Redux, d’où l’intérêt ...