Tutorial: Cómo acceder a los datos de tu aplicación sin sufrimiento con React Context API

¿Ya sabes cómo funciona React Context API? En este tutorial te enseñaré cómo compartir datos entre componentes sin necesidad de pasarlos como propiedades componente tras componente. Esto nos ahorrará algunos enredos que probablemente tengamos en nuestras aplicaciones hechas con React o que resolvemos con librerías como Redux. Para poder hacer uso de React Context API necesitarás tener instalada la versión 16.3 de React en tu proyecto.

Entonces, ¿cuál era la forma en la que pasábamos datos entre componentes con React antes de esto? Supongamos que tengo un componente padre llamado App, y dentro de ese componente mando llamar a mi componente Playlist y dentro de Playlist se llama al componente Song.

import React, { Component} from 'react';

class App extends Component {
	state = {
		title: 'Despacito',
		artist: 'Luis Fonsi',
		released: '2017',
	}
	render() {
		return(
			<Playlist />
		);
	}
}

class Playlist extends Component {
	render() {
		return(
			<Song />
		);
	}
}

class Song extends Component {
	render() {
		return(
			<div>Canción</div>
		);
	}
}

export default App;

Ahora, ¿qué pasa si quiero utilizar los datos de la canción dentro del componente Song? Tendría que pasarlos como propiedades a través de cada componente. O sea:

import React, { Component} from 'react';

class App extends Component {
	state = {
		title: 'Despacito',
		artist: 'Luis Fonsi',
		released: '2017',
	}
	render() {
		return(
			<Playlist title={this.state.title}/ />
		);
	}
}

class Playlist extends Component {
	render() {
		return(
			<Song title={this.props.title} />
		);
	}
}

class Song extends Component {
	render() {
		return(
			<div>Canción: {this.props.title}</div>
		);
	}
}

export default App;

Si continuamos así, entre más niveles de profundidad tenga nuestra aplicación todo se volverá más enredado y puede terminar en un desastre. Es por eso, que muchos decidimos comenzamos a utilizar un contenedor de estados como Redux e inyectar los datos en el componente en el que lo necesitemos. El Contexto en React 16.3 funciona de manera similar. Para que funcione necesitamos un Provider y un Consumer. Lo primero que haremos será crear nuestro nuevo contexto, agregando el siguiente código:

const AppContext = React.createContext();

Lo siguente será crear nuestro Provider, el lugar en donde vivirán nuestros datos. Con la propiedad value pasaremos los datos a los que queremos acceder en nuestra aplicación.

class AppProvider extends Component {
	state = {
		title: 'Despacito',
		artist: 'Luis Fonsi',
		released: '2017',
	}
	render() {
		return(
			<AppContext.Provider value={{state: this.state}}>
				{this.props.children}
			</AppContext.Provider>
		);
	}
}

Nuestro Provider deberá ser siempre el componente de más alto nivel en nuestra aplicación, por lo que envolveremos nuestro componente principal App con el. De igual forma quitaremos los datos de este componente, pues ya no será necesario porque vivirán en el Provider.

class App extends Component {
	render() {
		return(
			<AppProvider>
				<Playlist />
			</AppProvider>
		);
	}
}

De esta forma, por más profundo que sea el nivel del componente en el querramos acceder a los datos, no habrá problema y podremos hacerlo. Ahora, ¿cómo hago para acceder a los datos de la canción desde el componente Song? Para eso necesitamos llamar a nuestro Consumer, siempre en el componente en donde queremos acceder a nuestros datos, en este caso el componente Song . El hijo de nuestro Consumer siempre va a ser una función que recibirá el contexto como parámetro y retornará la estructura y los datos que necesitemos. En el contexto es donde se encuentran todos los datos que asignamos a la propiedad value en el Provider.

class Song extends Component {
	render() {
		return(
			<div>Canción:
				<AppContext.Consumer>
					{(context) => (
						<p>{context.state.song}</p>
					)}
				</AppContext.Consumer>
			</div>
		);
	}
}

Y de esta forma es como accedemos a los datos sin necesidad de estarlos pasando como propiedades a través de cada componente. Espero que este pequeño ejemplo les haya ayudado a tener una idea más clara de cómo podemos hacer esto con react y sin necesidad de librerías externas. Dejen todas sus dudas en los comentarios y con gusto las responderé.