Do you want to switch to Platzi in English?
23

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

14275Puntos

hace 5 meses

Curso de React.js
Curso de React.js

Curso de React.js

React es una de las librerías más utilizadas hoy en día para crear aplicaciones web. En este curso podrás dominar la creación de aplicaciones a través de un proyecto que te ayudará a explotar todas las capacidades de esta librería.

¿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.

importReact, { Component} from 'react';

classAppextendsComponent{
	state = {
		title: 'Despacito',
		artist: 'LuisFonsi',
		released: '2017',
	}
	render() {
		return(
			<Playlist />
		);
	}
}

classPlaylistextendsComponent{
	render() {
		return(
			<Song />
		);
	}
}

classSongextendsComponent{
	render() {
		return(
			<div>Canción</div>
		);
	}
}

export defaultApp;

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:

importReact, { Component} from 'react';

classAppextendsComponent{
	state = {
		title: 'Despacito',
		artist: 'LuisFonsi',
		released: '2017',
	}
	render() {
		return(
			<Playlist title={this.state.title}/ />
		);
	}
}

classPlaylistextendsComponent{
	render() {
		return(
			<Song title={this.props.title} />
		);
	}
}

classSongextendsComponent{
	render() {
		return(
			<div>Canción: {this.props.title}</div>
		);
	}
}

export defaultApp;

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.

classAppProviderextendsComponent{
	state = {
		title: 'Despacito',
		artist: 'LuisFonsi',
		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.

classAppextendsComponent{
	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.

classSongextendsComponent{
	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é.

Curso de React.js
Curso de React.js

Curso de React.js

React es una de las librerías más utilizadas hoy en día para crear aplicaciones web. En este curso podrás dominar la creación de aplicaciones a través de un proyecto que te ayudará a explotar todas las capacidades de esta librería.
Fannytaviles
Fannytaviles
@fannytaviles

14275Puntos

hace 5 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
13456Puntos

Pos a poner en práctica 🤔

3
11683Puntos

Está buenísimo el tutorial, super útil 😃

2
24822Puntos

Nice Tutorial!! 😃

1
4740Puntos

Cómo organizar esto en carpetas? que pasa si tengo varios contextos, pasaría algo como el Callback hell?

1

Muy bueno el tutorial. Cabe anotar que según la gente de react, el contexto debe ser utilizado para pasar datos como el usuario actual el lenguaje o un tema, pero no debe ser usado para prevenir usar props ente diferentes niveles de componentes. https://reactjs.org/docs/context.html#when-to-use-context

1
14275Puntos
5 meses

Depende de cuántos niveles quieras pasar las propiedades. Si son más de 2 o 3 niveles es recomendable usar el contexto.

0
3521Puntos

Excelente artículo Fanny!
Me he quedado con un duda… es posible modificar parte del estado inicial usando el API Context? Por ejemplo, que desde un componente NewSong, clickear un botón y que eso cambie la canción inicial por otra y esto se refleje en el componente Song?
Quedo atento a tu respuesta, desde ya muchas gracias, saludos!