<file_sep>## React hot reload v3 with react-router v3 with redux

Does hot reload work? **YES**
Does time travel work? **NO** (no router state)
Can child component access router state with connect? **NO** (no router state)

Note: There is no router state in Redux store. Breaks time travel debugging when the route has been changed.
<file_sep>## react-hot-reload v3 Scaffold ##

This repo contains scaffolds for `react-hot-reload` v3 and compare pros and cons when combining it with react-router and redux with several methods.

### Result ###

| redux | react-router | react-router-redux |  redux-router | hot reload | correct time travel | child component can access router state via connect |
|-------|--------------|--------------------|---------------|------------|---------------------|-----------------------------------------------------|
| no | no | no | no | **YES** | **NO** | **NO** |
| yes | no | no | no | **YES** | **YES** | **NO** |
| no | v3 | no | no | **YES** | **NO** | **NO** |
| yes | v3 | no | no | **YES** | **NO** | **NO** |
| yes | v3 | v4 | no | **NO** | **YES** | **NO** |
| yes | v2 | no | v2 | **NO** | **YES** | **YES** |
| yes | v4 | v5 | no | **YES** | **YES** | **YES** |
<file_sep>## React hot reload v3 with redux ##

Does hot reload work? **YES**

Note: Does not use react-router.
<file_sep>## React hot reload v3 with react-router v3

Does hot reload work? **YES**
<file_sep>## React hot reload v3 with react-router v2 and redux-router v2 ##

Does hot reload work? **NO**
Does time travel work? **YES**
Can child component access router state with connect? **YES**

Note: redux-router v2.1.2 needs react-router v2.x and history v2.x (does not work with react-router v3 with history v2.x/3.x)
<file_sep>## React hot reload v3 without react-router and redux

Does hot reload work? **YES**
<file_sep>import React from 'react'
import { IndexRoute, Router, Route, browserHistory } from 'react-router'
import Home from './components/Home'
import Hello from './components/Hello'
import Counter from './components/Counter'
import NoMatch from './components/NoMatch'
import Layout from './components/Layout'

const App = () => (
  <Router history={browserHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={Home} />
      <Route path="hello" component={Hello} />
      <Route path="counter" component={Counter} />
      <Route path="*" component={NoMatch} />
    </Route>
  </Router>
)

export default App
<file_sep>import React from 'react'
import { ConnectedRouter } from 'react-router-redux'
import routes from './routes'

const App = () => {
  return (
    <ConnectedRouter>
      { routes }
    </ConnectedRouter>
  )
}

export default App
<file_sep>import React from 'react'
import { connect } from 'react-redux'
import HelloChild from './HelloChild'

const Hello = ({ path }) => (
  <div>
    <div>Hello</div>
    <HelloChild path={path} />
  </div>
)

const mapStateToProps = (state, ownProps) => ({
  path: ownProps.location.pathname,
})

export default connect(mapStateToProps)(Hello)
<file_sep>import React from 'react'

const HelloChild = ({ path }) => (
  <div>
    Hello-Child at {path} (receive path from parent)
  </div>
)

export default HelloChild
<file_sep>import { combineReducers } from 'redux'
import { routerStateReducer } from 'redux-router'
import counterReducer from './counter'

const rootReducer = combineReducers({
  count: counterReducer,
  router: routerStateReducer,
})

export default rootReducer
<file_sep>import React from 'react'
import { ReduxRouter } from 'redux-router'
import routes from './routes'

const App = () => (
  <ReduxRouter>
    { routes }
  </ReduxRouter>
)

export default App
<file_sep>## React hot reload v3 with react-router v4 and react-router-redux v5 ##

Does hot reload work? **YES**
Does time travel work? **YES**
Can child component access router state with connect? **YES**

Note:
`react-router-redux` is still not available on npm. So, we have to use directly from [timdorr's branch](https://github.com/timdorr/react-router-redux/tree/5.0.x) and build it in our `node_modules` folder.

**How to run**
1. `yarn`
2. `npm run prepare` This will install and build `react-router-redux` in `node_modules`
3. `npm run dev`
