はネイティブ/ Reduxの/ Firebaseに反応 -

Question

私は反応するネイティブ/ Reduxの/ firebaseでログインプロセスを作るしようとしていると私はいくつかの問題を持っを派遣していないonAuthStateChanged ...

は私がアクションをディスパッチするonAuthStateChangedを実装しようしかし、それは私が望むように動作していません。

それは2例のために働いています：

1 - 私は、直接私の下のように私のコンポーネントでonAuthStateChanged実装：

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

2 - 私はReduxの-サンクとアクションとしてではなく派遣せずにそれを実装します（しかし、私はアクションをディスパッチして正しいルートにリダイレクトできません）

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"); 
      } 
     }); 

};

そして、私は何をしたいこれです（ただし、動作しません）：

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)); 
      } 
     }); 
}; 

};

誰かがディスパッチではうまくいかない理由を説明できますか？

ありがとうございます！

Answer 1

2つのこと：

1. 使用（例えば、isUserConnected）一つの機能と（あなたが現在いるとして、代わりに2つの異なる機能を使用しての、isUserNotConnectedとisUserConnected）trueまたはfalseのいずれかに値を設定する

   firebase documentation

あたり firebase.auth()から

変更

---

これを試してください。

Reduxので

（これは私の作品）（アクション）：

Reduxので

// 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 
    } 
} 

（減速）：

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

コンポーネント：

// 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

。以下は、私のルートコンテナの例です。これは私の最高のコンポーネントです。

**あなたの場合、authStateChangeListenerは、componentDidMount（）の内部のようなアプリケーションレベルのコンポーネントに移動する必要があります。ユーザーが存在する場合は、あなたの懸念事項を分けてください....次に、ストア更新を破棄するアクションから関数を呼び出します。

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) 
} 

}

そして、これはあなたが `isUserNotConnected`と` isUserConnected`するための機能を共有することができます私の行動範囲内

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) 

};