Merge pull request #1414 from reactjs/react-router-redux-4

Use react-router-redux@4

Author: gaearon

examples/real-world/containers/App.js

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

examples/real-world/containers/RepoPage.js

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

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

@@ -2,15 +2,15 @@ import React, { Component, PropTypes } from 'react'
 import { Provider } from 'react-redux'
 import routes from '../routes'
 import DevTools from './DevTools'
-import { Router, browserHistory } from 'react-router'
+import { Router } from 'react-router'
 
 export default class Root extends Component {
   render() {
-    const { store } = this.props
+    const { store, history } = this.props
     return (
       <Provider store={store}>
         <div>
-          <Router history={browserHistory} routes={routes} />
+          <Router history={history} routes={routes} />
           <DevTools />
         </div>
       </Provider>

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

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

examples/real-world/containers/UserPage.js

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

examples/real-world/index.js

@@ -1,12 +1,15 @@
 import 'babel-polyfill'
 import React from 'react'
 import { render } from 'react-dom'
+import { browserHistory } from 'react-router'
+import { syncHistoryWithStore } from 'react-router-redux'
 import Root from './containers/Root'
 import configureStore from './store/configureStore'
 
 const store = configureStore()
+const history = syncHistoryWithStore(browserHistory, store)
 
 render(
-  <Root store={store} />,
+  <Root store={store} history={history} />,
   document.getElementById('root')
 )

examples/real-world/package.json

@@ -23,8 +23,8 @@
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-redux": "^4.2.1",
-    "react-router": "2.0.0-rc5",
-    "react-router-redux": "^2.1.0",
+    "react-router": "2.0.0",
+    "react-router-redux": "^4.0.0-rc.1",
     "redux": "^3.2.1",
     "redux-logger": "^2.4.0",
     "redux-thunk": "^1.0.3"

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 { routeReducer } from 'react-router-redux'
+import { routerReducer as routing } from 'react-router-redux'
 import { combineReducers } from 'redux'
 
 // Updates an entity cache in response to any action with response.entities.
@@ -50,8 +50,7 @@ const rootReducer = combineReducers({
   entities,
   pagination,
   errorMessage,
-  routing: routeReducer
+  routing
 })
 
-
 export default rootReducer

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

@@ -1,27 +1,20 @@
 import { createStore, applyMiddleware, compose } from 'redux'
-import { syncHistory } from 'react-router-redux'
-import { browserHistory } from 'react-router'
-import DevTools from '../containers/DevTools'
 import thunk from 'redux-thunk'
-import api from '../middleware/api'
 import createLogger from 'redux-logger'
+import api from '../middleware/api'
 import rootReducer from '../reducers'
-
-const reduxRouterMiddleware = syncHistory(browserHistory)
+import DevTools from '../containers/DevTools'
 
 export default function configureStore(initialState) {
   const store = createStore(
     rootReducer,
     initialState,
     compose(
-      applyMiddleware(thunk, api, reduxRouterMiddleware, createLogger()),
+      applyMiddleware(thunk, api, createLogger()),
       DevTools.instrument()
     )
   )
 
-  // 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,6 +1,4 @@
 import { createStore, applyMiddleware } from 'redux'
-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'
@@ -9,6 +7,6 @@ export default function configureStore(initialState) {
   return createStore(
     rootReducer,
     initialState,
-    applyMiddleware(thunk, api, syncHistory(browserHistory))
+    applyMiddleware(thunk, api)
   )
 }