Reagieren Nativ/Redux/Firebase - onAuthStateChanged nicht

Question

versendet

Ich versuche, mit reagieren nativer/Redux/Feuerbasis einen Login-Prozess zu machen und ich habe einige Probleme ...

Ich versuche onAuthStateChanged zu implementieren, um eine Aktion zu versenden , aber es funktioniert nicht so wie ich es will.

Es ist für zwei Fälle arbeiten:

1 - ich meine direkt implementieren onAuthStateChanged in meiner Komponente wie unten:

componentDidMount() { 
    firebaseAuth.onAuthStateChanged() 
     .then((user) => { 
      if (user) { 
       Actions.home(); 
      } else { 
       Actions.login(); 
      } 
     }); 
} 

2 - ich es umsetzen als eine Aktion mit redux-Thunk in aber ohne Versand (aber dann kann ich keine Aktion versenden und zu meiner korrekten Route umleiten)

export const isAuthenticated =() => { 
    firebaseAuth.onAuthStateChanged() 
     .then((user) => { 
      if (user) { 
       console.log("launch.action#isAuthenticated - user already connected"); 
      } else { 
       console.log("launch.action#isAuthenticated - user not connected"); 
      } 
     }); 

};

Und ich will, was dies zu tun ist (aber nicht funktioniert):

export const isAuthenticated =() => { 
return (dispatch) => { 
    firebaseAuth.onAuthStateChanged() 
     .then((user) => { 
      console.log('user', user); 
      if (user) { 
       console.log("launch.action#isAuthenticated - user already connected"); 
       dispatch(isUserConnected(true)); 
      } else { 
       console.log("launch.action#isAuthenticated - user not connected"); 
       dispatch(isUserNotConnected(true)); 
      } 
     }); 
}; 

};

Kann mir jemand erklären, warum es nicht mit dem Versand funktioniert?

Danke!

Answer 1

Zwei Dinge:

1. Verwenden Sie eine Funktion (zB isUserConnected) und den Wert einstellen, um entweder true oder false (statt zwei verschiedene Funktionen zu verwenden, isUserNotConnected und isUserConnected, wie Sie sich gerade befinden)

2. ändern firebaseAuth-firebase.auth() pro der firebase documentation

---

Versuchen Sie dies.

(Dies funktioniert für mich)

In Redux (Aktionen):

// Firebase 
import firebase from 'firebase'; 

// Redux Function 
export const testFirebaseInRedux =() => { 
    return (dispatch, getState) => { 
    firebase.auth().onAuthStateChanged(function (user) { 
     if (user) { 
     console.log("testFirebaseInRedux: logged in"); 
     dispatch(isUserConnected(true)); 
     } else { 
     console.log("testFirebaseInRedux: not logged in"); 
     dispatch(isUserConnected(false)); 
     } 
    }) 
    } 
} 

export const isUserConnected = (payloadToSet) => { 
    return { 
    type: 'IS_USER_CONNECTED', 
    payload: payloadToSet 
    } 
} 

In Redux (Reduzierungen):

export default function (state=initialState, action) { 
    switch(action.type) { 
    case 'IS_USER_CONNECTED': 
    return { 
     ...state, 
     isUserConnected: action.payload 
    } 
    default: 
    return { 
     ...state 
    } 
    } 
} 

Komponente:

// Libraries 
import React from 'react'; 

// Redux 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import {testFirebaseInRedux} from './../actions/index.js'; 

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props); 
  } 

    componentDidMount() { 
    this.props.testFirebaseInRedux() 
    } 

} 

function mapStateToProps(state) { 
    return { 
     user: state.user 
    }; 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({ 
     testFirebaseInRedux: testFirebaseInRedux, 
    }, dispatch) 
} 


export default connect(mapStateToProps, matchDispatchToProps)(YourComponent); 

Answer 2

. Hier ist ein Beispiel von meinem Root-Container, der fast meine höchste Komponente ist

** In Ihrem Fall müssen Sie Ihre AuthStateChangeListener auf eine App-Level-Komponente, wie in einer KomponenteDidMount() verschieben. Dann trennen Sie Ihre Bedenken, wenn der Benutzer existiert .... Dann rufen Sie eine Funktion aus Ihren Aktionen, die ein Geschäft aktualisieren.

componentDidMount() { 
// if redux persist is not active fire startup action 
if (!ReduxPersist.active) { 
    this.props.startup() 
} 

// ********* Add a listener from the database to monitor whos logged in. ********* 
firebase.auth().onAuthStateChanged((user) => { 
    // ********* If a user is logged in firebase will return the user object. THEY ARE NOT LOGGED IN THOUGH ********* 
    if (user) { 
    console.log('onAuthStateChanged', user) 
    // ********* Then we call an official Firebase login function through actions ********* 
    this.props.loginRequest(user); 
    } else { 
    console.log('No user signed in') 
    } 
}); 

// ********* After logging in the found user from above we need to set them to redux store ********* 
let signedInUser = firebase.auth().currentUser; 

if (signedInUser) { 
    this.props.loginRequest(signedInUser); 
    console.log('currentUserSignedIn', signedInUser) 
} else { 
    console.log('no active user', signedInUser) 
} 

}

Und das ist mein loginRequest, die in meinen Handlungen lebt

export const loginRequest = user => dispatch => { 
    // ******** This gets called in RootContainer on mount, it will populate redux store with the entire User object from firebase ******** 
    // ******** FYI - The entire user object also contains their vehicles ******** 
    // ******** Here we need to check if user already exists in Firebase Database so that we dont overwrite their old data ******** 
    // ******** WARNING! With Firebase if you set data to a spot that has existing data it will overwrite it! ******** 
    console.log('RECIEVED USER TO LOOKUP', user); 
    firebase.database().ref('users/' + user.uid).once('value').then(function (snapshot) { 
     // ******** This method is straight from their docs ******** 
     // ******** It returns whatever is found at the path xxxxx/users/user.uid ******** 
     let username = snapshot.val(); 
     console.log(' FOUND THIS USER FROM THE DB', username); 
     { 
      // ******** If the username object is empty there wasn't any data at xxxxxx/user/user.uid ******** 
      // ******** It's safe to write data to this spot ******** 
      username === null ? firebase.database().ref('users/' + user.uid).set({ 
       account: username 
      }).then(function() { 
       console.log('STORED THIS USER TO FIREBASE DB', username); 
       dispatch(userSet(username)) 
      }) 
       // ******** Otherwise, the user already exists and we should update redux store with logged in user ******** 
       : dispatch(userSet(username)) 
     } 
    }) 
     .catch((err) => console.log(err)); 

    dispatch(userSet(user)) 
    console.log('INSIDE FIREBASEE DB SET', user) 

};