app.js

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { IndexRoute, Router, Route, browserHistory } from 'react-router'
import { syncHistory } from 'react-router-redux'
const reduxRouterMiddleware = syncHistory(browserHistory)

/*
*   Create the store with two middlewares :
*   1. redux-thunk : Allow us to asynchronous things in the actions
*   2. reduxRouterMiddleware : Sync dispatched route actions to the history
*/

import rootReducer from './rootReducer'
import { routeActions } from 'react-router-redux'

const createStoreWithMiddleware = applyMiddleware(thunk, reduxRouterMiddleware)(
  createStore
)
const store = createStoreWithMiddleware(rootReducer)

const authenticate = function(nextState, replaceState) {
  const state = store.getState()
  debugger
  if (!state.isLoggedIn && nextState.location.pathname !== '/login') {
    replaceState('/login')
  }
}

// Required for replaying actions from devtools to work
reduxRouterMiddleware.listenForReplays(store)

// Import the app
import App from './containers/App'
import HomePage from './containers/HomePage'
import UserDetail from './containers/UserDetail'
import UserLogin from './containers/UserLogin'

render(
<Provider store={store}>
  <Router history={browserHistory}>
    <Route path="/" component={App} onEnter={authenticate}>
      <IndexRoute component={HomePage} />
      <Route path="login" component={UserLogin} />
      <Route path="user">
        <Route path=":id" component={UserDetail} />
      </Route>
    </Route>
  </Router>
</Provider>,
document.getElementById('app')
)