Merge pull request reduxjs#1276 from Pierrickouw/master

Update real-world example with react-router-redux

examples/real-world/containers/App.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { pushState } from 'redux-router'
+import { push } from 'react-router-redux'
 import Explore from '../components/Explore'
 import { resetErrorMessage } from '../actions'
 
@@ -17,7 +17,7 @@ class App extends Component {
   }
 
   handleChange(nextValue) {
-    this.props.pushState(null, `/${nextValue}`)
+    this.props.push(`/${nextValue}`)
   }
 
   renderErrorMessage() {
@@ -56,7 +56,7 @@ App.propTypes = {
   // Injected by React Redux
   errorMessage: PropTypes.string,
   resetErrorMessage: PropTypes.func.isRequired,
-  pushState: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired,
   inputValue: PropTypes.string.isRequired,
   // Injected by React Router
   children: PropTypes.node
@@ -65,11 +65,11 @@ App.propTypes = {
 function mapStateToProps(state) {
   return {
     errorMessage: state.errorMessage,
-    inputValue: state.router.location.pathname.substring(1)
+    inputValue: state.routing.location.pathname.substring(1)
   }
 }
 
 export default connect(mapStateToProps, {
   resetErrorMessage,
-  pushState
+  push
 })(App)

examples/real-world/containers/RepoPage.js

@@ -72,8 +72,8 @@ RepoPage.propTypes = {
   loadStargazers: PropTypes.func.isRequired
 }
 
-function mapStateToProps(state) {
-  const { login, name } = state.router.params
+function mapStateToProps(state, props) {
+  const { login, name } = props.params
   const {
     pagination: { stargazersByRepo },
     entities: { users, repos }

examples/real-world/containers/Root.dev.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { Provider } from 'react-redux'
-import { ReduxRouter } from 'redux-router'
+import Routes from '../routes'
 import DevTools from './DevTools'
 
 export default class Root extends Component {
@@ -9,7 +9,7 @@ export default class Root extends Component {
     return (
       <Provider store={store}>
         <div>
-          <ReduxRouter />
+          <Routes />
           <DevTools />
         </div>
       </Provider>

examples/real-world/containers/Root.prod.js

@@ -1,13 +1,14 @@
 import React, { Component, PropTypes } from 'react'
 import { Provider } from 'react-redux'
-import { ReduxRouter } from 'redux-router'
+
+import Routes from '../routes'
 
 export default class Root extends Component {
   render() {
     const { store } = this.props
     return (
       <Provider store={store}>
-        <ReduxRouter />
+        <Routes />
       </Provider>
     )
   }

examples/real-world/containers/UserPage.js

@@ -72,8 +72,8 @@ UserPage.propTypes = {
   loadStarred: PropTypes.func.isRequired
 }
 
-function mapStateToProps(state) {
-  const { login } = state.router.params
+function mapStateToProps(state, props) {
+  const { login } = props.params
   const {
     pagination: { starredByUser },
     entities: { users, repos }

examples/real-world/package.json

@@ -15,18 +15,17 @@
   },
   "homepage": "https://rackt.github.io/redux",
   "dependencies": {
-    "history": "^1.17.0",
     "humps": "^0.6.0",
     "isomorphic-fetch": "^2.1.1",
     "lodash": "^4.0.0",
     "normalizr": "^2.0.0",
     "react": "^0.14.6",
     "react-dom": "^0.14.6",
     "react-redux": "^4.0.6",
-    "react-router": "^1.0.3",
+    "react-router": "2.0.0-rc5",
+    "react-router-redux": "^2.1.0",
     "redux": "^3.0.6",
     "redux-logger": "^2.4.0",
-    "redux-router": "^1.0.0-beta3",
     "redux-thunk": "^1.0.3"
   },
   "devDependencies": {

examples/real-world/reducers/index.js

@@ -1,7 +1,7 @@
 import * as ActionTypes from '../actions'
 import merge from 'lodash/merge'
 import paginate from './paginate'
-import { routerStateReducer as router } from 'redux-router'
+import { routeReducer } from 'react-router-redux'
 import { combineReducers } from 'redux'
 
 // Updates an entity cache in response to any action with response.entities.
@@ -50,7 +50,8 @@ const rootReducer = combineReducers({
   entities,
   pagination,
   errorMessage,
-  router
+  routing: routeReducer
 })
 
+
 export default rootReducer

examples/real-world/routes.js

@@ -1,14 +1,18 @@
 import React from 'react'
-import { Route } from 'react-router'
+import { Route, browserHistory, Router } from 'react-router'
 import App from './containers/App'
 import UserPage from './containers/UserPage'
 import RepoPage from './containers/RepoPage'
 
-export default (
-  <Route path="/" component={App}>
-    <Route path="/:login/:name"
-           component={RepoPage} />
-    <Route path="/:login"
-           component={UserPage} />
-  </Route>
-)
+export default function Routes() {
+  return (
+    <Router history={browserHistory}>
+      <Route path="/" component={App}>
+        <Route path="/:login/:name"
+               component={RepoPage} />
+        <Route path="/:login"
+               component={UserPage} />
+      </Route>
+    </Router>
+  )
+}

examples/real-world/store/configureStore.dev.js

@@ -1,23 +1,25 @@
 import { createStore, applyMiddleware, compose } from 'redux'
-import { reduxReactRouter } from 'redux-router'
+import { syncHistory } from 'react-router-redux'
+import { browserHistory } from 'react-router'
 import DevTools from '../containers/DevTools'
-import createHistory from 'history/lib/createBrowserHistory'
-import routes from '../routes'
 import thunk from 'redux-thunk'
 import api from '../middleware/api'
 import createLogger from 'redux-logger'
 import rootReducer from '../reducers'
 
+const reduxRouterMiddleware = syncHistory(browserHistory)
 const finalCreateStore = compose(
-  applyMiddleware(thunk, api),
-  reduxReactRouter({ routes, createHistory }),
+  applyMiddleware(thunk, api, reduxRouterMiddleware),
   applyMiddleware(createLogger()),
   DevTools.instrument()
 )(createStore)
 
 export default function configureStore(initialState) {
   const store = finalCreateStore(rootReducer, initialState)
-
+
+  // Required for replaying actions from devtools to work
+  reduxRouterMiddleware.listenForReplays(store)
+
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
     module.hot.accept('../reducers', () => {

examples/real-world/store/configureStore.prod.js

@@ -1,14 +1,12 @@
 import { createStore, applyMiddleware, compose } from 'redux'
-import { reduxReactRouter } from 'redux-router'
-import createHistory from 'history/lib/createBrowserHistory'
-import routes from '../routes'
+import { syncHistory } from 'react-router-redux'
+import { browserHistory } from 'react-router'
 import thunk from 'redux-thunk'
 import api from '../middleware/api'
 import rootReducer from '../reducers'
 
 const finalCreateStore = compose(
-  applyMiddleware(thunk, api),
-  reduxReactRouter({ routes, createHistory })
+  applyMiddleware(thunk, api, syncHistory(browserHistory)),
 )(createStore)
 
 export default function configureStore(initialState) {