Как я могу установить пользовательский объект из запроса на авторизацию firebase в свое состояние избыточности? - PullRequest
0 голосов
/ 13 мая 2019

У меня есть заставка, на которой отображается логотип моего приложения и заголовок, и я даю ему несколько секунд, прежде чем делать что-либо с setTimeout.В это время я пытаюсь проверить, не вошел ли пользователь ранее в приложение, или это новое, используя эту функцию, у firebase есть firebase.auth().onAuthStateChanged(), которая должна возвращать объект пользователя с информацией о зарегистрированном пользователе, или ничего, еслиПользователь не вошел в систему. Он обнаруживает, что я вошел в систему, в этом случае я хочу, чтобы мое приложение перенаправляло на основную сцену, которая работала нормально, но теперь я хочу, чтобы информация об этом пользователе также была в главной сцене, так чтоЯ попытался использовать this.props.user = user;, но мой компилятор выдал ошибку, сказав следующее:

TypeError: TypeError: TypeError: null is not an object (evaluating 'elements.props')

Что я могу сделать?Я думал, что смогу получить доступ к своим реквизитам из componentDidMount функции.

Код моего SplashScreen.js

import React, { Component } from 'react';
import { View, Image } from 'react-native';
import TypeWriter from 'react-native-typewriter';
import firebase from 'firebase';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import { reloginUser } from '../actions';

class SplashScreen extends Component {

  componentDidMount() {
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyDSV1Ozhe4M6p9Q9MdUGSCAqhW53DyUNYo",
      authDomain: "idionative.firebaseapp.com",
      databaseURL: "https://idionative.firebaseio.com",
      projectId: "idionative",
      storageBucket: "idionative.appspot.com",
      messagingSenderId: "924806570373",
      appId: "1:924806570373:web:a3f5b6dc190d8039"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    setTimeout(function() {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {  // Here I check whether the user was logged in or not
          this.props.user = user;
          Actions.main();
        } else {
          Actions.auth();
        }
      });
    }, 2000);
  }

  render() {

    const { sceneStyle, logoStyle, titleStyle } = styles;

    return(
      <View style={sceneStyle}>
        <Image source={require('../assets/images/logo.png')} style={logoStyle} />
        <TypeWriter typing={1} style={titleStyle}>Idionative{this.props.user}</TypeWriter>
      </View>
    );
  }

}

const styles = {
  sceneStyle: {
    backgroundColor: '#9ED0E6',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoStyle: {
    width: 120,
    height: 120
  },
  titleStyle: {
    fontFamily: 'NotoSans-Regular',
    fontSize: 50,
    color: 'black',
    marginTop: 20
  }
};

const mapStateToProps = ({ auth }) => {
  const { user } = auth;
  return { user };
};

export default connect(mapStateToProps, { reloginUser })(SplashScreen);

Код моего файла действий:

import firebase from 'firebase';
import { Actions } from 'react-native-router-flux';
import { EMAIL_CHANGED, PASSWORD_CHANGED, LOGIN_USER_SUCCESS, LOGIN_USER_FAIL, LOGIN_USER, RELOGIN_USER } from './types';

export const emailChanged = (text) => {
  return {
    type: EMAIL_CHANGED,
    payload: text
  };
};

export const passwordChanged = (text) => {
  return {
    type: PASSWORD_CHANGED,
    payload: text
  };
};

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => loginUserFail(dispatch));
  }
}

export const reloginUser = (user) => {
  return {
    type: RELOGIN_USER,
    payload: user
  };
};

const loginUserSuccess = (dispatch, user) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  });

  Actions.main();
};

const loginUserFail = (dispatch) => {
  dispatch({
    type: LOGIN_USER_FAIL
  });
};

Мой файл редуктора:

import { EMAIL_CHANGED, PASSWORD_CHANGED, LOGIN_USER_SUCCESS, LOGIN_USER_FAIL, LOGIN_USER, RELOGIN_USER } from '../actions/types';

const INITIAL_STATE = { email: '', password: '', user: null, error: '', loading: false };

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    case LOGIN_USER:
      return { ...state, loading: true, error: '' }
    case LOGIN_USER_SUCCESS:
      return { ...state, ...INITIAL_STATE, user: action.payload, };
    case LOGIN_USER_FAIL:
      return { ...state, error: 'This User Does Not Exist', password: '', loading: false }
    case RELOGIN_USER:
      return { ...state, user: action.payload }
    default:
      return state;
  }
};
...