Le nuove context API di React 16.3

Luca Perna
Luca PernaFullstack Web Developer

Le context API di ReactJS sono sempre state motivo di equivocità, tanto che gli stessi sviluppatori di casa Facebook ne sconsigliavano l’utilizzo.

Con React 16.3 l’incubo è finalmente finito e ora possiamo gestire una sorta di stato globale per la nostra applicazione senza dover ricorrere a “mamma” Redux, anche se – sia chiaro – non ne va completamente a sostituire la necessità.

Vediamo nella pratica come affrontare il passaggio dell’informazione attraverso vari componenti rispettivamente prima senza l’uso dei context e poi con le nuove API.

// App.js

import React, { Component } from 'react';
import Container from './Container';

const languages = {
  eng: {
    greeting: 'Hello word!',
  },
  ita: {
    greeting: 'Ciao mondo!',
  },
};

class App extends Component {
  render() {
    return (
      <div>
        <Container lang={languages.eng} />
      </div>
    );
  }
}

Qui in alto abbiamo un semplice componente App che chiama un altro nostro componente, il quale fa da contenitore e passa l’attributo eng dell’oggetto languages definito come costante in alto.

// Container.js

import React, { Component } from 'react';
import Greeting from './Greeting';

class Container extends Component {
  render() {
    return (
      <div>
        <Greeting lang={this.props.lang} />
      </div>
    );
  }
}

Il componente Container ha il bisogno di ripassare la proprietà lang a quello che sarà l’utilizzatore finale del saluto nella lingua corretta.

// Greeting.js

import React, { Component } from 'react';


class Greeting extends Component {
  render() {
    return (
      <p>{this.props.lang.greeting}</p>
    );
  }
}

Con l’utilizzo dei context possiamo evitare questi passaggi inutili.

Vediamo ora lo stesso esempio con l’applicazione delle context API.

// LanguageContext.js

import { createContext } from 'react';

export const languages = {
  eng: {
    greeting: 'Hello word!',
  },
  ita: {
    greeting: 'Ciao mondo!',
  },
};

export const LanguageContext = createContext(languages.ita);



// App.js

import React, { Component } from 'react';
import Container from './Container';

import { LanguageContext, languages } from './LanguageContext';

class App extends Component {
  render() {
    return (
      <LanguageContext.Provider value={languages.eng}>
        <Container />
      </LanguageContext.Provider>
    );
  }
}



// Container.js

import React, { Component } from 'react';
import Greeting from './Greeting';


class Container extends Component {
  render() {
    return (
      <div>
        <Greeting />
      </div>
    );
  }
}



// Greeting.js

import React, { Component } from 'react';
import { LanguageContext } from './LanguageContext';

class Greeting extends Component {
  render() {
    return (
      <LanguageContext.Consumer>
        {lang => <p>{lang.greeting}</p>}
      </LanguageContext.Consumer>
    );
  }
}

Un esempio semplice che ci fa capire come possiamo sfruttare i context: analizzando il codice possiamo vedere come il metodo di React createContext andrà a creare il nostro context con un valore di default iniziale, nel nostro caso scegliendo la lingua italiana. Questo context verrà poi importato da App che utilizzerà il suo componente Providerfornendo un valore (nel nostro caso l’oggetto della lingua inglese o quella di default se non venisse specificato) a tutti i suoi figli. Possiamo infatti vedere che il componente Containernon prende assolutamente in considerazione il suddetto context, lo fa invece il componente Greeting, andando a utilizzare questa volta il Consumer del nostro LanguageContext. React infatti andrà a cercare il primo Provider che troverà salendo di livello e utilizzerà il suo valore (value).

Le nuove context API di React 16.3 sono un ottimo strumento da utilizzare, non tanto in casi semplici come questo appena visto (gli stessi sviluppatori ne scoraggiano l’uso in casi così), quanto per andare a distribuire la stessa informazione a un’applicazione intera, come l’utente corrente, il tema o la lingua scelta senza dover dar vita a un passaggio inutile di propscomponente per componente.

Se questo articolo vi ha incuriosito o se siete interessati a conoscere il funzionamento base di React, venite a scoprirlo al workshop che si terrà giovedì 12 aprile presso ThinkOpen. Per registrarsi: How to… React – Workshop (evento gratuito)

2018-05-21T12:05:44+00:00