Hacer accesible una variable fuera de una función

Hacer accesible una variable fuera de una función

Tengo este código de React Native y quiero usar la variable gameOfTheUser (que se crea en la función de flecha: userRef. ounce (' value'). then (snapshot =>) fuera de este, para poder continuar con las diferentes condiciones. ¿Cómo hacerlo? Imagino (¡y espero!) que existe una solución sencilla a este problema.

Mi RouterScreen.js:

    import React from 'react';
    import { Text } from 'react-native';
    import fb from '../engine/firebaseConfig';

    export default class RouterScreen extends React.Component {
      componentDidMount() {
        const { navigate } = this.props.navigation;
        fb.auth().onAuthStateChanged(user => {
          if (user) {
            var userRef = fb.database().ref('users/' + user.uid);
            userRef.once('value').then(snapshot => {
              var gameOfTheUser = snapshot.child('game').val();
              console.log('0 : ' + gameOfTheUser);
            });
            if (gameOfTheUser !== null) {
              console.log('InGame');
              var gameID = gameOfTheUser;
              console.log('1 : ' + gameOfTheUser);
              console.log('1 : ' + gameID);
              navigate('Game', { user, gameID });
            } else {
              console.log('NotInGame');
              navigate('Choose', { user });
            }
          } else {
            navigate('Auth');
          }
        });
      }

      render() {
        return <Text>Hello</Text>;
      }
    }

Mi aplicación.js:

import React from 'react';
import { StackNavigator } from 'react-navigation';

// Pages
import RouterScreen from './screens/RouterScreen';
import AuthScreen from './screens/AuthScreen';
import ChooseScreen from './screens/ChooseScreen';
import GameScreen from './screens/GameScreen';

export const RootStack = StackNavigator(
  {
    Router: {
      screen: RouterScreen,
    },
    Auth: {
      screen: AuthScreen,
    },
    Choose: {
      screen: ChooseScreen,
    },
    Game: {
      screen: GameScreen,
    },
  },
  {
    initialRouteName: 'Router',
    headerMode: 'none',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}
Mostrar la mejor respuesta

Creo que puedo describir su propósito en:

  • Iniciar sesión de usuario
  • Si está dentro del juego -> navegar al juego
  • Si no -> navegue a Auth.

Hay muchas formas de hacer esto, pero como "simple" en su pregunta, creo que React Native Async Storage es una buena solución.

AsyncStorage es un sistema de almacenamiento de clave-valor simple, sin cifrar, asincrónico y persistente que es global para la aplicación. Debería utilizarse en lugar de LocalStorage.

Consulte el documento de React Native sobre el almacenamiento asíncrono aquí.

Hay algunos códigos de demostración:

Obtener datos del almacenamiento:

var gameOfTheUser = AsyncStorage.getItem('gameOfTheUser');

Guardar datos en almacenamiento asíncrono:

await AsyncStorage.setItem('gameOfTheUser', 'the_witcher_3');

Nota: el almacenamiento asíncrono solo puede guardar datos con el tipo de cadena. Entonces, con datos complejos como una matriz u Objeto, debe JSON.stringify primero

Gracias por esta solución, dices que hay otras, ¿puedes contarme más? El problema con AsyncStorage es que ralentiza la aplicación.

Primero, sobre su propósito de acceder a datos fuera de la función. Puede resolverse de manera simple configurándola en una variable de mayor alcance como _global o Class variable (simple) o usar un sistema de administración de estado más complejo como Redux, Mobx. Pero creo que su objetivo principal es almacenar datos cuando la aplicación no está activa y puede volver a acceder a ellos cuando el usuario inicia sesión. Por lo tanto, necesita un sistema de caché como Async Storage u otra solución de caché nativa de reacción. También guarda sus datos en línea en su base de datos y los devuelve con los datos del usuario.