text: import React, { Component, Fragment } from 'react'
  import { BrowserRouter as Router, Route } from 'react-router-dom'
  import { connect } from 'react-redux'
  import { handleInitialData } from '../actions/shared'
  import Dashboard from './Dashboard'
  import LoadingBar from 'react-redux-loading'
  import NewTweet from './NewTweet'
  import TweetPage from './TweetPage'
  import Nav from './Nav'
  
  class App extends Component {
  
    componentDidMount() {
      this.props.dispatch(handleInitialData()) //we have access to dispatch because when we connect this component to the store it gets the mapped slice of state (none in this case) as well as dispatch as a prop
    }
  
    render() {
      return (
        <Router>
          <Fragment> {/**Allows us to have the loading bar outside the div but still pass a single child to Router */}
            <LoadingBar />
            <div className='container'>
              <Nav />
              {this.props.loading === true
                ? null
                : <div>
                    <Route path='/' exact component={Dashboard} />
                    <Route path='/tweet/:id' component={TweetPage} />
                    <Route path='/new' component={NewTweet} />
                  </div>}
            </div>
          </Fragment>
        </Router>
      )
    }
  }
  
  function mapStateToProps({ authedUser }) {
    return {
      loading: authedUser === null
    }
  }
  
  //connect the App component to the store
  //Using the connect() function upgrades a component to a container. Containers can read state from the store and dispatch actions.
  export default connect(mapStateToProps)(App)