React Native Complete Course with Router, Hooks and Context

¡Hola! Me parece que estás describiendo un curso de React Native ofrecido por OAK Academy en Udemy. Este tipo de curso es ideal para aquellos que deseen aprender a desarrollar aplicaciones móviles para Android e iOS utilizando JavaScript y la librería React Native. A continuación, te detallo cómo puedes consumir el contexto en componentes clase y funcionales, así como el uso de múltiples contextos en un componente, que parece ser una parte del curso que estás interesado.

Cómo consumir Context en componentes clase y funcionales:

En React, el Context es una característica de la librería que permite a los datos "fluir" a través del árbol de componentes sin tener que pasarlos explícitamente a través de cada nivel jerárquico. Aquí cómo lo hacemos:

Componentes Funcionales

Para un componente funcional, puedes usar el hook useContext para acceder al contexto creado. Aquí tienes un ejemplo básico:

import React, { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const valueFromContext = useContext(MyContext);
  
  return (
    <div>
      The context value is {valueFromContext}.
    </div>
  );
}

En este caso, MyContext es el proveedor del contexto que contiene datos o compones que quieres compartir entre componentes. useContext te permite consumir ese valor sin tener que wrappar tu componente en Consumer.

Componentes Clase

Para un componente clase, puedes usar el método contextType para acceder al contexto creado. Aquí está un ejemplo:

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

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.contextType = MyContext; // Establece el contexto que este componente consumirá.
  }

  render() {
    const valueFromContext = this.context;
    
    return (
      <div>
        The context value is {valueFromContext}.
      </div>
    );
  }
}

En este caso, MyContext.Consumer podría ser usado para acceder al valor del contexto dentro de MyComponent, pero esto es más verboso y menos escalable que usar contextType en un componente clase.

Uso de Múltiples Contextos

Si necesitas usar múltiples contextos, puedes crear una jerarquía de contextos o utilizar el hook useReducer junto con useContext para manejar múltiples pedazos de estado dentro del mismo contexto. Aquí hay un ejemplo de cómo podrías configurar múltiples contextos:

import React, { createContext, useReducer } from 'react';

// Crear dos contextos distintos para diferentes partes del estado.
const UserContext = createContext();
const ThemeContext = createContext();

function userReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return { loggedInUser: action.payload };
    case 'LOGOUT':
      return {};
    default:
      return state;
  }
}

function themeReducer(state, action) {
  switch (action.type) {
    case 'SET_THEME':
      return { ...state, theme: action.payload };
    default:
      return state;
  }
}

function App() {
  const [user, dispatchUser] = useReducer(userReducer, { loggedInUser: null });
  const [theme, dispatchTheme] = useReducer(themeReducer, { theme: 'light' });

  return (
    <UserContext.Provider value={{ user, dispatchUser }}>
      <ThemeContext.Provider value={{ theme, dispatchTheme }}>
        {/* ... resto del componente  */}
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

En este ejemplo, tenemos un contexto para la información del usuario y otro para el tema de la aplicación. Los componentes que necesiten acceder a uno o ambos contextos pueden hacerlo mediante useContext.

Recuerda que para usar múltiples contextos, cada contexto debe ser creado e iniciado independientemente como en el ejemplo anterior. Asegúrate de no colocar lógica de estado diferente dentro del mismo contexto si no es necesario para mantener las cosas organizadas y escalables.

Espero que esta información te sea útil y te ajuante en tu aprendizaje con el curso de OAK Academy. ¡Buena suerte!