Перенаправить зарегистрированного пользователя Firebase в главный компонент с помощью response-native-router-flux

Я пытаюсь направлять пользователя к основному компоненту каждый раз при запуске приложения.

Я использую response-native-router-flux в качестве оболочки навигации, Firebase в качестве бэкэнда и Redux в качестве библиотеки управления состоянием.

Вот в чем проблема. Я делаю firebase.auth().onAuthStateChanged() в своем компоненте маршрутизатора, чтобы определить, вошел ли пользователь в систему.

Если пользователя нет, то верните компонент Login.

Если пользователь вошел в систему, верните основной компонент в качестве базового компонента в стеке.

В этом SO POST есть точная проблема и предложенный ответ предполагает использование Переключить функцию с response-native-router-flux. Я попробовал, но это не помогло.

Вот мой код.

App.js

import React, { Component } from 'react';

import firebase from 'firebase';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk'
import reducers from './reducers';

import Router from './Router';

class App extends Component {

  componentWillMount() {
    firebase.initializeApp({
      //my firebase config
    });
  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

export default App;

Router.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { isLoggedIn } from './actions';
import { Scene, Router, Actions, Switch } from 'react-native-router-flux';

import firebase from 'firebase';

import Login from './components/auth/Login';
import Register from './components/auth/Register';
import Main from './components/Main';

class RouterComponent extends Component {

  state = { loggedIn: false }

  componentWillMount() {
    this.props.isLoggedIn();
  }

  render() {
    return(
      <Router sceneStyle={{ }} hideNavBar={true}>
        <Scene key="root">
          <Scene key="authContainer" initial>
            <Scene key="login" component={Login} title="Login Page" />
            <Scene key="register" component={Register} title="Register Page" />
          </Scene>

          <Scene key="mainContainer">
            <Scene key="main" component={Main} title="Main Page" />
          </Scene>
        </Scene>
      </Router>
    )
  }
}

export default connect(null, { isLoggedIn })(RouterComponent);

Некоторые из моих создателей действий redux

export const isLoggedIn = (dispatch) => {
  return(dispatch) => {
    firebase.auth().onAuthStateChanged((user) => loginUserSuccess(dispatch, user));
  };
};

const loginUserSuccess = (dispatch, user) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  });
  Actions.mainContainer({ type: 'reset'});
};

Я понимаю, что точной мотивации можно достичь с помощью приведенного ниже асинхронного фрагмента:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // return <Main />
  } else {
    // Stay at login screen
  }
});

но я пытаюсь воссоздать его с помощью response-native-router-flux.

Вот гифка моего приложения, чтобы помочь вам понять больше. Пользователь уже вошел в систему. Главный экран будет отправлен через некоторое время. Есть мысли?