Makina Blog

Le blog Makina-corpus

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.

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

Formations Front end

Formation ReactJS

À distance (FOAD) Du 21 au 25 octobre 2024

Voir la formation

Formations Mobile

Formation 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
Read The Docs
01/02/2024

Publier une documentation VitePress sur Read The Docs

À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.

Voir l'article
Image
Widget
04/04/2023

Créer une application en tant que composant web avec Stencil

Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.

Voir l'article
Image
Vue.js + D3.js, un bon combo !
30/03/2023

Vue.js & D3.js : un bon combo pour une data visualisation dynamique

Pour faire des indicateurs dynamiques avec D3.js, l'utilisation d'un framework front comme Vue.js peut simplifier la vie.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus