(refactor)app: switch to redux-simple-router

Author: justingreenberg

README.md

@@ -34,7 +34,7 @@ Features
   * Includes react-addons-test-utils (`^0.14.0`)
 * [React-Router](https://github.com/rackt/react-router) (`^1.0.0`)
 * [Redux](https://github.com/gaearon/redux) (`^3.0.0`)
-  * redux-router (`^1.0.0-beta3`)
+  * redux-simple-router (`^0.0.10`)
   * react-redux (`^4.0.0`)
   * redux-devtools
     * use `npm run dev:nw` to display in a separate window.
@@ -154,7 +154,7 @@ You can redefine which packages to treat as vendor dependencies by editing `vend
   'react',
   'react-redux',
   'react-router',
-  'redux-router',
+  'redux-simple-router',
   'redux'
 ]
 ```

config/index.js

@@ -34,7 +34,7 @@ config.set('vendor_dependencies', [
   'react-redux',
   'react-router',
   'redux',
-  'redux-router'
+  'redux-simple-router'
 ].filter(dep => {
   if (pkg.dependencies[dep]) return true;
 

package.json

@@ -32,7 +32,7 @@
     "react-redux": "^4.0.0",
     "react-router": "1.0.0",
     "redux": "^3.0.0",
-    "redux-router": "^1.0.0-beta3",
+    "redux-simple-router": "^0.0.10",
     "redux-thunk": "^1.0.0",
     "yargs": "^3.18.0"
   },

src/app.js

@@ -1,15 +1,23 @@
-import React          from 'react';
-import ReactDOM       from 'react-dom';
-import Root           from './containers/Root';
-import configureStore from './store/configureStore';
+import React                  from 'react';
+import ReactDOM               from 'react-dom';
+import createBrowserHistory   from 'history/lib/createBrowserHistory';
+import { syncReduxAndRouter } from 'redux-simple-router';
+import Root                   from './containers/Root';
+import configureStore         from './store/configureStore';
 
-const target = document.getElementById('root');
-const store  = configureStore(window.__INITIAL_STATE__, __DEBUG__);
+const target  = document.getElementById('root');
+const history = createBrowserHistory();
+const store   = configureStore(window.__INITIAL_STATE__, __DEBUG__);
+
+syncReduxAndRouter(history, store);
 
 const node = (
-  <Root store={store}
-        debug={__DEBUG__}
-        debugExternal={__DEBUG_NW__} />
+  <Root
+    history={history}
+    store={store}
+    debug={__DEBUG__}
+    debugExternal={__DEBUG_NW__} 
+  />
 );
 
 ReactDOM.render(node, target);

src/containers/Root.js

@@ -1,14 +1,15 @@
 import React                    from 'react';
 import { Provider }             from 'react-redux';
+import { Router }               from 'react-router';
 import routes                   from '../routes';
-import { ReduxRouter }          from 'redux-router';
 import DevTools                 from './DevTools';
 import { createDevToolsWindow } from '../utils';
 
 export default class Root extends React.Component {
   static propTypes = {
-    store : React.PropTypes.object.isRequired,
-    debug : React.PropTypes.bool,
+    history : React.PropTypes.object.isRequired,
+    store   : React.PropTypes.object.isRequired,
+    debug   : React.PropTypes.bool,
     debugExternal : React.PropTypes.bool
   }
 
@@ -30,9 +31,9 @@ export default class Root extends React.Component {
     return (
       <Provider store={this.props.store}>
         <div>
-          <ReduxRouter>
+          <Router history={this.props.history}>
             {routes}
-          </ReduxRouter>
+          </Router>
           {this.renderDevTools()}
         </div>
       </Provider>

src/reducers/index.js

@@ -1,8 +1,8 @@
 import { combineReducers }    from 'redux';
-import { routerStateReducer } from 'redux-router';
+import { routeReducer }       from 'redux-simple-router';
 import counter                from './counter';
 
 export default combineReducers({
   counter,
-  router: routerStateReducer
+  routing: routeReducer
 });

src/routes/index.js

@@ -2,9 +2,11 @@ import React                 from 'react';
 import { Route, IndexRoute } from 'react-router';
 import CoreLayout            from 'layouts/CoreLayout';
 import HomeView              from 'views/HomeView';
+import AboutView             from 'views/AboutView';
 
 export default (
-  <Route path='/' component={CoreLayout}>
+  <Route        component={CoreLayout} path='/'>
     <IndexRoute component={HomeView} />
+    <Route      component={AboutView}  path='/about' />
   </Route>
 );

src/store/configureStore.js

@@ -1,8 +1,5 @@
 import rootReducer          from '../reducers';
 import thunk                from 'redux-thunk';
-import routes               from '../routes';
-import { reduxReactRouter } from 'redux-router';
-import createHistory        from 'history/lib/createBrowserHistory';
 import DevTools             from 'containers/DevTools';
 import {
   applyMiddleware,
@@ -18,14 +15,8 @@ export default function configureStore (initialState, debug = false) {
   if (debug) {
     createStoreWithMiddleware = compose(
       middleware,
-      reduxReactRouter({ routes, createHistory }),
       DevTools.instrument()
     );
-  } else {
-    createStoreWithMiddleware = compose(
-      middleware,
-      reduxReactRouter({ routes, createHistory })
-    );
   }
 
   const store = createStoreWithMiddleware(createStore)(

src/views/AboutView.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const AboutView = () => (
+  <div className='container text-center'>
+    <h1>This is the about view!</h1>
+    <hr />
+    <Link to='/'>Back To Home View</Link>
+  </div>
+);
+
+export default AboutView;

src/views/HomeView.js

@@ -2,6 +2,7 @@ import React                  from 'react';
 import { bindActionCreators } from 'redux';
 import { connect }            from 'react-redux';
 import counterActions         from 'actions/counter';
+import { Link }               from 'react-router';
 
 // We define mapStateToProps and mapDispatchToProps where we'd normally use
 // the @connect decorator so the data requirements are clear upfront, but then
@@ -30,6 +31,8 @@ export class HomeView extends React.Component {
                 onClick={this.props.actions.increment}>
           Increment
         </button>
+        <hr />
+        <Link to='/about'>Go To About View</Link>
       </div>
     );
   }