Creando el contexto (Context API)

3. Creando nuestro contexto

Antes de iniciar con la creación de componentes, vamos a crear nuestro contexto, es decir, vamos a implementar context API para poder controlar todas las interacciones del juego desde un punto central, para eso vamos a crear una carpeta llamada context dentro de nuestra carpeta /src y a su vez, un archivo dentro llame también context.js, en el vamos a agregar el siguiente código:

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

export const AliensContext = createContext();

const AliensProvider = (props) => {

    const [isRunning, setIsRunning] = useState(false);

    return (
        <AliensContext.Provider
            value={{
                isRunning,
                setIsRunning
            }}
        >
            {props.children}
        </AliensContext.Provider>
    )
}

export default AliensProvider;

Al usar createContext, estamos inicializando nuestro objeto principal en el app, este objeto tendrá las acciones que podremos consumir y ejecutar desde los componentes que lo usen.

En este punto, crearemos todas las acciones con la inicialización del useState, por ahora crearemos nuestro estado del juego, para saber si está corriendo o no. Esos valores definidos en el useState se los pasaremos como value a nuestro provider Al final, exportamos nuestro provider, el cual vamos a llamar desde nuestra aplicación principal game y desde los archivos que manejan lógica del juego.

4. Consumiendo nuestro contexto

Ahora, vamos a consumir nuestro archivo de contexto, abrimos App.js , borramos todo el código, e incluimos el siguiente:

import React from 'react';
import AliensProvider from './context/context';

function App() {
  return (
    <AliensProvider>
     <h1>KeyHero!</h1>
    </AliensProvider>
  );
}

export default App;

Al final obtendriamos algo como esto:

Si corremos nuestra aplicación

npm run start

deberiamos de ver lo siguiente, recuerda instalar el add-on de react para el navegador que estés usando. Si ves al lado derecho, tenemos el contexto, y la variable isRunning inicializada en false, que fue el valor que establecimos al definirla.

Ahora, con context API podemos consumir información desde cualquier componente, sin necesidad de estar pasando propiedades heredando uno sobre otro, lo cual haría mucho mas complejo el desarrollo.