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

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