App.js

import React from 'react';
import './App.css';
import LoginScreen from  '../screens/LoginScreen';
import MainScreen from '../screens/MainScreen';
import { connect } from 'react-redux';
import MenuAppBar from './MenuAppBar';

const App = ({ user, auth, database, onUserLoaded }) => {
  // constructor(){
  //   super();
  //   this.state = {
  //     isSignedIn: false,
  //     loaded: false,
  //     title: 'Элдик'
  //   };
  // }
  //
  // setTitle = title => {
  //   this.setState({ title: title });
  // }

  auth.onAuthStateChanged(userSigned => {
    onUserLoaded(userSigned);
    console.log(userSigned);
  });

  return (
    <div>
      { user.loaded ? (
        <div>
          { true ? (
            <div className="App">
              <MenuAppBar />
              <MainScreen auth={auth} database={database} />
            </div>
          ) : (
            <LoginScreen />
          ) }
        </div>) : (
          <div>Loading...</div>
        ) }
    </div>
  );
}

export default connect(
  (state, ownProps) => ({
    user: state.user,
    auth: state.firebase.auth,
    database: state.firebase.database
  }),
  dispatch => ({
    onUserLoaded: (user) => {
      dispatch({ type: !!user ? 'SIGN_IN' : 'SIGN_OUT', payload: user });
    }
  })
)(App);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import { Route, BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import reducers from './reducers';

const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk)));

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Route path="/" component={App}/>
    </BrowserRouter>
  </Provider>, document.getElementById('root'));
registerServiceWorker();

reducers-index.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import firebase from './firebase';
import user from './user';

export default combineReducers({
  routing: routerReducer,
  firebase,
  user
});

user.js

const initialState = {
  isSignedIn: false,
  data: {},
  loaded: false
};

export default function reducerUser(state = initialState, action){
  console.log(action);
  switch(action.type){
    case 'SIGN_IN':
      return {
        isSignedIn: true,
        data: action.payload,
        loaded: true
      };
    case 'SIGN_OUT':
      return {
        isSignedIn: false,
        data: {},
        loaded: true
      };
  }
  return state;
}