Accueil / Blog / Métier / 2018 / React 16.3 : Introduction de la context API

React 16.3 : Introduction de la context API

Par Bastien Alvez — publié 06/04/2018, édité le 27/06/2018
React 16.3 apporte son lot de nouveautés, mais surtout la version stable de la context API.
React 16.3 : Introduction de la context API

La Context API

Cette "nouveauté" permet de faire transiter des props d'un composant parent à un composant enfant sans prendre en compte les possibles composants intermediaires.

Jusqu'ici pour pallier ce problème, on utilisait des patterns comme Redux. Mais celui-ci est souvent trop complet et compliqué à mettre en place.

C'est pourquoi, dans certains cas, il est maintenant plus logique d'utiliser la context api. Elle est, par exemple, particulièrement intéressante pour gérer des thèmes et préférences utilisateurs.

L'utilisation

Le fonctionnement de la context api est plutôt simple. Nous allons avoir besoin de créer un contexte. Le contexte sera diffusé grâce à un provider et on pourra ensuite y accéder avec un consumer. Et voilà.

React.createContext

React.createContext permet d'initialiser notre contexte avec des valeurs par défaut.

Il renvoie un object qui contient un provider ainsi qu'un consumer qui vont de pair.

const {Provider, Consumer} = React.createContext(defaultValue);

Provider

Le provider est le composant le plus haut de notre application, ou du moins de notre context. Un provider peut être connecté à plusieurs consumers. Il accepte en entrée "value", qui sera la props diffusée pour les composants.

<Provider value={{theme: "Material", showAdvancedSettings: true}}>

Consumer

Le consumer est le composant qui va s'abonner à un provider.

Afin de récupérer l'état de notre context, depuis notre provider, on doit utiliser une fonction en tant qu'enfant.

<Consumer>
  {value => <TabBar theme={value.theme} showAdvancedSettings={value.showAdvancedSettings} />}
</Consumer>

Exemple

L'exemple suivant est évidement simple, et on n'a pas besoin d'un gestionnaire d'état dans ce cas là. Il n'est ici que pour illustrer l'utilisation et la surcharge d'un context.

App.js

import React, { Component } from 'react';

const MyContext = React.createContext({
  showAdvancedSettings: false
});

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        showAdvancedSettings: false
    };

    this.toggleAdvancedSettings = () => {
      this.setState(state => ({
        showAdvancedSettings:
          !state.showAdvancedSettings
      }));
    };
  }
render() {
// Ici, lors du clic, la valeur showAdvancedSettings changera dans le state et donc                         
// dans son contexte. Néanmoins, la valeur ne sera pas égale à celle du second         
// MyContext.Consumer. On a ici deux contextes différents.
// Le second MyContext.Consumer utilise le provider par défaut renvoyé par     
// React.createContext et la valeur showAdvancedSettings sera donc toujours false.  
return (
  <div>
    <MyContext.Provider value={{showAdvancedSettings : this.state.showAdvancedSettings}}>
      <button onClick={this.toggleAdvancedSettings} />
      <MyContext.Consumer>
        {MyDataConsumer => (
          <div>
            Should i show advanced settings ? {MyDataConsumer.showAdvancedSettings}
            {MyDataConsumer.showAdvancedSettings &&  <div>I'm the avanced settings</div>}
          </div>
        )}
      </MyContext.Consumer>
    </MyContext.Provider>
    <MyContext.Consumer>
      {MyDataConsumer => (
        <div>
          Should i show advanced settings ? {MyDataConsumer.showAdvancedSettings}
            {MyDataConsumer.showAdvancedSettings &&  <div>I'm the avanced settings</div>}
        </div>
      )}
    </MyContext.Consumer>
  </div>
  )}
}

export default App;

Redux ou Context API ?

La context api est simple d'emploi et pourra être utilisée dans de nombreuses applications afin de remplacer Redux.

Mais si l'application a pour ambition d'être volumineuse, il sera sans doute plus opportun d'utiliser un autre gestionnaire d'état, comme Redux... pour le moment en tout cas.

L'api va recevoir de multiples mises à jour, ce qui pourra, peut être à terme, totalement remplacer les autres gestionnaires d'état.

Nous couvrons ces nouveautés dans nos formations React et React Native

Pour créer une application React Native, accéder à notre vidéo

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Les nouveautés de Typescript 3.0 Les nouveautés de Typescript 3.0 13/08/2018

Typescript 3.0 vient de sortir, voici quelques nouveautés... et des exemples !

Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 13/08/2018

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular. Cet article a été écrit ...

Ionic 2 : les nouveautés (retours de l'AngularConnect) Ionic 2 : les nouveautés (retours de l'AngularConnect) 23/10/2015

Des changements radicaux et bienvenus par rapport à la version 1 d'Ionic.

Créer un menu natif crossplatform avec React Native Créer un menu natif crossplatform avec React Native 20/07/2016

Ou comment gérer les composants natifs par plateforme ?

Découverte de React Native Découverte de React Native 18/04/2016

Présentation de React Native, quelles sont ses possibilités et peut-on l'utiliser en prod ?