actions.js

export const CHANGE_LOGGED_IN = 'CHANGE_LOGGED_IN';


export const changeLoggedIn = (newValue) => ({
  type: CHANGE_LOGGED_IN,
  newValue: newValue,
});

ActuallyMainApp.jsx

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';

import Loading from './Loading';
import Login from './Login';
import App from './App';
import { changeLoggedIn } from './actions';


class ActuallyMainApp extends Component {
  componentDidMount() {
    const that = this;
    setTimeout(() => { that.props.changeLoggedIn(true) }, 300);
  }

  render() {
    if (this.props.loggedIn === null) {
      return <Loading />
    }

    return (
      <Switch>
        <Route path="/login/" component={Login} />
        <Route component={App} />
      </Switch>
    )
  }
}


export default connect(
  state => ({
    loggedIn: state.loggedIn,
  }), {
    changeLoggedIn,
  }
)(ActuallyMainApp)

App.js

import React from 'react';
import { connect } from 'react-redux';
import { Link, Redirect, Route, Switch } from 'react-router-dom';

const Nav = () => (
  <ul>
    <Link to="/friends/"><li>Friends</li></Link>
    <Link to="/books/"><li>Books</li></Link>
  </ul>
)


const Friends = () => <h1>Friends</h1>
const Books = () => <h1>Books</h1>


const App = () => (
  <div>
    <Nav />
    <Switch>
      <Route exact path="/friends/" component={Friends} />
      <Route exact path="/books/" component={Books} />
      <Redirect exact from="/" to="/friends/" />
    </Switch>
  </div>
)


export default connect(
  state => ({
    loggedIn: state.loggedIn,
  })
)(App);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux'

import ActuallyMainApp from './ActuallyMainApp';
import reducers from './reducers';

ReactDOM.render(
  <Provider store={createStore(reducers)}>
    <BrowserRouter>
      <ActuallyMainApp />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

Loading.jsx

import React from 'react';


const Loading = () => <h1>Loading</h1>


export default Loading

Login.jsx

import React from 'react'


const Login = () => <h1>Login</h1>


export default Login;

reducers.js

import { combineReducers } from 'redux';

import { CHANGE_LOGGED_IN } from './actions';


const loggedInReducer = ( state = null, action) => {
  switch (action.type) {
    case CHANGE_LOGGED_IN: return action.newValue;
    default: return state;
  };
};


const reducers = combineReducers({
  loggedIn: loggedInReducer,
});


export default reducers;