Migrate real-world example to redux-react-router

Author: gaearon

examples/real-world/components/Explore.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes, findDOMNode } from 'react';
+import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 
 const GITHUB_REPO = 'https://github.com/rackt/redux';
 

examples/real-world/containers/App.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { pushState } from 'redux-react-router';
 import Explore from '../components/Explore';
 import { resetErrorMessage } from '../actions';
 
@@ -16,9 +17,7 @@ class App extends Component {
   }
 
   handleChange(nextValue) {
-    // Available thanks to contextTypes below
-    const { history } = this.context;
-    history.pushState(null, `/${nextValue}`);
+    this.props.pushState(null, `/${nextValue}`);
   }
 
   renderErrorMessage() {
@@ -40,14 +39,10 @@ class App extends Component {
   }
 
   render() {
-    // Injected by React Router
-    const { location, children } = this.props;
-    const { pathname } = location;
-    const value = pathname.substring(1);
-
+    const { children, inputValue } = this.props;
     return (
       <div>
-        <Explore value={value}
+        <Explore value={inputValue}
                  onChange={this.handleChange} />
         <hr />
         {this.renderErrorMessage()}
@@ -58,29 +53,23 @@ class App extends Component {
 }
 
 App.propTypes = {
+  // Injected by React Redux
   errorMessage: PropTypes.string,
   resetErrorMessage: PropTypes.func.isRequired,
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired
-  }),
-  params: PropTypes.shape({
-    userLogin: PropTypes.string,
-    repoName: PropTypes.string
-  }).isRequired,
+  pushState: PropTypes.func.isRequired,
+  inputValue: PropTypes.string.isRequired,
+  // Injected by React Router
   children: PropTypes.node
 };
 
-App.contextTypes = {
-  history: PropTypes.object.isRequired
-};
-
 function mapStateToProps(state) {
   return {
-    errorMessage: state.errorMessage
+    errorMessage: state.errorMessage,
+    inputValue: state.router.location.pathname.substring(1)
   };
 }
 
-export default connect(
-  mapStateToProps,
-  { resetErrorMessage }
-)(App);
+export default connect(mapStateToProps, {
+  resetErrorMessage,
+  pushState
+})(App);

examples/real-world/containers/RepoPage.js

@@ -65,15 +65,15 @@ RepoPage.propTypes = {
   repo: PropTypes.object,
   fullName: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  owner: PropTypes.object.isRequired,
+  owner: PropTypes.object,
   stargazers: PropTypes.array.isRequired,
   stargazersPagination: PropTypes.object,
   loadRepo: PropTypes.func.isRequired,
   loadStargazers: PropTypes.func.isRequired
 };
 
-function mapStateToProps(state, ownProps) {
-  const { login, name } = ownProps.params;
+function mapStateToProps(state) {
+  const { login, name } = state.router.params;
   const {
     pagination: { stargazersByRepo },
     entities: { users, repos }
@@ -93,7 +93,7 @@ function mapStateToProps(state, ownProps) {
   };
 }
 
-export default connect(
-  mapStateToProps,
-  { loadRepo, loadStargazers }
-)(RepoPage);
+export default connect(mapStateToProps, {
+  loadRepo,
+  loadStargazers
+})(RepoPage);

examples/real-world/containers/UserPage.js

@@ -72,8 +72,8 @@ UserPage.propTypes = {
   loadStarred: PropTypes.func.isRequired
 };
 
-function mapStateToProps(state, ownProps) {
-  const { login } = ownProps.params;
+function mapStateToProps(state) {
+  const { login } = state.router.params;
   const {
     pagination: { starredByUser },
     entities: { users, repos }
@@ -92,7 +92,7 @@ function mapStateToProps(state, ownProps) {
   };
 }
 
-export default connect(
-  mapStateToProps,
-  { loadUser, loadStarred }
-)(UserPage);
+export default connect(mapStateToProps, {
+  loadUser,
+  loadStarred
+})(UserPage);

examples/real-world/createDevToolsWindow.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
+
+/**
+ * Puts Redux DevTools into a separate window.
+ * Based on https://gist.github.com/tlrobinson/1e63d15d3e5f33410ef7#gistcomment-1560218.
+ */
+export default function createDevToolsWindow(store) {
+  // Give it a name so it reuses the same window.
+  const win = window.open(
+    null,
+    'Redux DevTools',
+    'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'
+  );
+
+  // Reload in case it's reusing the same window with the old content.
+  win.location.reload();
+
+  // Wait a little bit for it to reload, then render.
+  setTimeout(() => render(
+    <DebugPanel top right bottom left>
+      <DevTools store={store} monitor={LogMonitor} />
+    </DebugPanel>,
+    win.document.body
+  ), 10);
+}

examples/real-world/index.js

@@ -1,28 +1,23 @@
 import 'babel-core/polyfill';
 import React from 'react';
-import createBrowserHistory from 'history/lib/createBrowserHistory';
+import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router, Route } from 'react-router';
+import { ReduxRouter } from 'redux-react-router';
 import configureStore from './store/configureStore';
-import App from './containers/App';
-import UserPage from './containers/UserPage';
-import RepoPage from './containers/RepoPage';
 
-const history = createBrowserHistory();
 const store = configureStore();
 
-React.render(
+render(
   <Provider store={store}>
-    {() =>
-      <Router history={history}>
-        <Route path="/" component={App}>
-          <Route path="/:login/:name"
-                 component={RepoPage} />
-          <Route path="/:login"
-                 component={UserPage} />
-        </Route>
-      </Router>
-    }
+    <ReduxRouter />
   </Provider>,
   document.getElementById('root')
 );
+
+if (process.env.NODE_ENV !== 'production') {
+  // Use require because imports can't be conditional.
+  // In production, you should ensure process.env.NODE_ENV
+  // is envified so that Uglify can eliminate this
+  // module and its dependencies as dead code.
+  require('./createDevToolsWindow')(store);
+}

examples/real-world/package.json

@@ -20,17 +20,20 @@
     "isomorphic-fetch": "^2.1.1",
     "lodash": "^3.10.1",
     "normalizr": "^1.0.0",
-    "react": "^0.13.3",
+    "react": "^0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1",
     "react-redux": "^2.1.2",
     "react-router": "^1.0.0-rc1",
     "redux": "^3.0.0",
     "redux-logger": "0.0.1",
+    "redux-react-router": "^1.0.0-beta1",
     "redux-thunk": "^0.1.0"
   },
   "devDependencies": {
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
     "react-hot-loader": "^1.3.0",
+    "redux-devtools": "^2.1.2",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

examples/real-world/reducers/index.js

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

examples/real-world/routes.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Route } 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>
+);

examples/real-world/store/configureStore.js

@@ -1,17 +1,22 @@
-import { createStore, applyMiddleware } from 'redux';
-import thunkMiddleware from 'redux-thunk';
-import apiMiddleware from '../middleware/api';
-import loggerMiddleware from 'redux-logger';
+import { createStore, applyMiddleware, compose } from 'redux';
+import { reduxReactRouter } from 'redux-react-router';
+import { devTools } from 'redux-devtools';
+import createHistory from 'history/lib/createBrowserHistory';
+import routes from '../routes';
+import thunk from 'redux-thunk';
+import api from '../middleware/api';
+import logger from 'redux-logger';
 import rootReducer from '../reducers';
 
-const createStoreWithMiddleware = applyMiddleware(
-  thunkMiddleware,
-  apiMiddleware,
-  loggerMiddleware
+const finalCreateStore = compose(
+  applyMiddleware(thunk, api),
+  reduxReactRouter({ routes, createHistory }),
+  applyMiddleware(logger),
+  devTools()
 )(createStore);
 
 export default function configureStore(initialState) {
-  const store = createStoreWithMiddleware(rootReducer, initialState);
+  const store = finalCreateStore(rootReducer, initialState);
 
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers