I'm developing on an Android, connected device (not emulator), with Live Reload enabled. Each time I make save a file, it reloads my app on the device - which is what I want.
I'm currently using Firebase for Auth and Realtime-Database.
To retrieve the logged user datas, I have a Redux action that calls the firebase.database() like this:
// AppRedux.js
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'setCurrentUser':
return { ...state, currentUser: action.value }
break;
// { ... }
}
}
const store = createStore(reducer, applyMiddleware(thunkMiddleware))
export { store }
const setCurrentUser = (user) => {
return {
type: "setCurrentUser",
value: user
}
}
const watchUserData = () => {
return function(dispatch) {
const { currentUser } = firebase.auth()
if (currentUser) {
console.log(currentUser.uid) // I always have the right uid, so firebase.auth() always works
const ref = firebase.database().ref('users/' + currentUser.uid)
ref.on('value', (snapshot) => {
const user = snapshot.val()
console.log(user) // I get there onlye once !
dispatch(setCurrentUser(user))
}, (error) => {
console.log(error)
})
}
}
}
export { setCurrentUser, watchUserData }
And here is where I call this action:
// Main.js
// { ... other imports}
import { watchUserData } from '../redux/AppRedux'
const mapStateToProps = (state) => {
return {
currentUser: state.currentUser
}
}
const mapDispatchToProps = (dispatch) => {
return {
watchUserData: () => dispatch(watchUserData())
}
}
class Main extends React.Component {
constructor(props) {
super(props)
}
componentWillMount() {
this.props.watchUserData()
}
render() {
const { currentUser } = this.props
return (
<View>
<Text>Hello { currentUser && currentUser.firstname }!</Text>
</View>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Main)
This piece of code works perfectly - but only once. When Live Reload fires, it won't work anymore.
Note that firebase.auth() still works and gives me the right uid, but firebase.database().ref('users/' + currentUser.uid).on('value') won't fire anymore
I have to npm run android (which is equal to react-native run-android) for it to fire again.. until the next Live Reload.
Note that it doesn't work even if I logout and signin again. I still have to npm run android for it to works.
Here is my package.json in case it would matter
"dependencies": {
"react": "^16.3.2",
"react-native": "^0.55.3",
"react-native-firebase": "^4.3.6",
"react-native-google-signin": "^1.0.0-rc5",
"react-navigation": "^2.14.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
}
Is there something I'm doing wrong? Is it because I have a free Firebase plan, and I make too much calls or something?