Redux/Firebase - Component not updating after uid is received in state - reactjs

Question

I'm using Firebase's authentication API for my Redux app. I have an app component that is supposed to be informed when a user's UID authentication is received and toggle which header is shown to the user (either logged in header or logged out header). However, in instances where the user is already logged in and revisiting the main route, I can't seem to get my main app to re-render when the UID is stored to the app state.
An outline of the flow is such:
In routes/index.js: Firebase's onAuthStateChanged observer
identifies if the user is already logged in or not when the main
route loads. If there's a user, dispatch actions to copy their UID
from Firebase to our state and send them to the "connect" page.
In actions.jsx: The startLoginForAuthorizedUser action creator
dispatches an action to update the auth reducer with the new UID &
reroute the user to "connect".
In reducers.jsx: The "auth" state is updated to include the user's
UID to allow components to toggle elements depending on
authentication status.
In App.jsx: For whatever reason, mapStateToProps is not receiving an
updated state, even though the user is authenticated and Redux dev
tools shows the state as updated with the new UID.
The end result is that authenticated users see the "connect" page as expected, but still see a logged-out header. Here's the code:
App.jsx
import React from 'react';
import { connect } from 'react-redux';
import * as actions from 'actions';
import HeaderLoggedOut from './HeaderLoggedOut';
import ModalOverlay from './ModalOverlay';
import MenuWrapper from './MenuWrapper';
import Header from './Header';
import Tabs from './Tabs';
export const App = React.createClass({
render(){
const { uid } = this.props;
console.log("App.jsx: uid:", uid);
if(!uid){
return(
<div>
<HeaderLoggedOut />
<div className="tonal-main">
<div className="tonal-content">
{ this.props.children }
</div>
</div>
<ModalOverlay />
</div>
);
}
return(
<MenuWrapper>
<Header />
<div className="tonal-content">
{ this.props.children }
</div>
<Tabs />
</MenuWrapper>
);
}
});
const mapStateToProps = (state) => {
// state is not updated
return {
uid: state.auth.uid
};
};
export default connect(mapStateToProps)(App);
router/index.js
import App from 'App.jsx';
import Connect from 'connect/Connect.jsx';
import firebase from 'app/firebase';
const store = require('store').configure();
firebase.auth().onAuthStateChanged((user) => {
if(user.emailVerified && user.uid){
store.dispatch(actions.startLoginForAuthorizedUser(user.uid));
} else {
browserHistory.push('/');
}
});
const requireLogin = (nextState, replace, next) => {
const currentUser = firebase.auth().currentUser;
if(!currentUser){
replace('/');
}
next();
};
const redirectIfLoggedIn = (nextState, replace, next) => {
const currentUser = firebase.auth.currentUser;
if(currentUser){
replace('/connect');
}
next();
};
export default (
<Router history={ browserHistory }>
<Route path="/" component={ App }>
<IndexRoute component={ Landing } onEnter={ redirectIfLoggedIn } />
<Route path="connect" component = { Connect } onEnter = { requireLogin } />
</Route>
</Router>
);
Actions.jsx
// ...actions, imports, etc...
export var startLoginForAuthorizedUser = (uid) => {
return (dispatch) => {
dispatch(login(uid));
dispatch(pushToRoute('/connect'));
};
};
export var login = (uid) => {
console.log('actions: logging in user with uid ', uid);
return{
type: 'LOGIN',
uid
};
};
export var pushToRoute = (route) => {
browserHistory.push(route);
};
Reducer.jsx
const authInitialState = {
uid: ""
};
export const authReducer = (state = authInitialState, action) => {
switch(action.type){
case 'LOGIN':
return {
...state,
uid: action.uid
};
case 'LOGOUT':
return {
...state,
uid: ""
};
default:
return state;
}
};
Any help from you experts would be greatly appreciated. This is driving me nuts.

Answer 1

I figured it out after an embarrassing amount of trial and error. For anyone else in the future who wants to use both react-router/react-router-dom and firebase's onAuthStateChanged() observer, just know you have to keep the observer code at your topmost component (where you render your provider in ReactDOM.render()).
If you keep it anywhere else, it doesn't appear to work properly and I frankly have no idea why. If someone more familiar with firebase wanted to explain what was happening there and why it would work in the top-level component but not in the routes index file, I'm sure it would help someone down the road.