React 16.3 : Introduction de la context API

React 16.3 apporte son lot de nouveautés, mais surtout la version stable de la context API.

Le blog Makina-corpus

React 16.3 apporte son lot de nouveautés, mais surtout la version stable 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

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

Formations associées

Front-end

ReactJS

Aucune session de formation n'est prévue pour le moment.

Pour plus d'informations, n'hésitez pas à nous contacter.

Voir la formation

Mobile

React Native

Aucune session de formation n'est prévue pour le moment.

Pour plus d'informations, n'hésitez pas à nous contacter.

Voir la formation

Actualités en lien

Image
Logo Cypress
11/10/2021

Retour d’expérience : tests fonctionnels avec Cypress

Dans le cadre d'un de nos projets de développement spécifique, l’équipe Makina Corpus a été amenée à coder un important logiciel métier avec de nombreuses entités et règles de gestion : l’Hydroportail.

Voir l'article
29/03/2019

Des boucles de composants génériques avec Angular

Ou comment faire des composants de listes réutilisables avec n'importe quel objet.

Voir l'article
Image
IA_Angular_Universal
08/10/2018

Mettre en place Angular Universal avec Angular 6 et 7

Le fonctionnement d'Angular Universal expliqué. Toutes les étapes de mise en place détaillées. Les pièges à éviter.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus