add connected-react-router support

package.json

@@ -88,7 +88,9 @@
     "webpack-merge": "2.6.1"
   },
   "dependencies": {
+    "connected-react-router": "4.0.0-beta.3",
     "core-js": "2.4.1",
+    "history": "4.5.1",
     "immutable": "3.8.1",
     "koa": "1.2.4",
     "koa-compress": "1.0.9",
@@ -105,7 +107,6 @@
     "react-dom": "15.4.2",
     "react-redux": "5.0.2",
     "react-router-dom": "4.0.0-beta.4",
-    "react-router-redux": "4.0.7",
     "redux": "3.6.0",
     "redux-immutable": "3.0.11",
     "redux-thunk": "2.2.0",

src/client/app/__snapshots__/app.spec.jsx.snap

@@ -1,85 +1,15 @@
 exports[`App renders without crashing 1`] = `
-<App>
-  <BrowserRouter>
-    <Router
-      history={
-        Object {
-          "action": "POP",
-          "block": [Function],
-          "createHref": [Function],
-          "go": [Function],
-          "goBack": [Function],
-          "goForward": [Function],
-          "length": 1,
-          "listen": [Function],
-          "location": Object {
-            "hash": "",
-            "key": undefined,
-            "pathname": "blank",
-            "search": "",
-            "state": undefined,
-          },
-          "push": [Function],
-          "replace": [Function],
-        }
-      }>
-      <div>
-        <Switch>
-          <Route
-            component={[Function]}
-            computedMatch={
-              Object {
-                "isExact": true,
-                "params": Object {},
-                "url": "blank",
-              }
-            }>
-            <PageNotFound
-              action="POP"
-              block={[Function]}
-              component={[Function]}
-              computedMatch={
-                Object {
-                  "isExact": true,
-                  "params": Object {},
-                  "url": "blank",
-                }
-              }
-              createHref={[Function]}
-              go={[Function]}
-              goBack={[Function]}
-              goForward={[Function]}
-              length={1}
-              listen={[Function]}
-              location={
-                Object {
-                  "hash": "",
-                  "key": undefined,
-                  "pathname": "blank",
-                  "search": "",
-                  "state": undefined,
-                }
-              }
-              match={
-                Object {
-                  "isExact": true,
-                  "params": Object {},
-                  "url": "blank",
-                }
-              }
-              push={[Function]}
-              replace={[Function]}>
-              <div
-                className="pageNotFound">
-                <h1>
-                  404
-                </h1>
-              </div>
-            </PageNotFound>
-          </Route>
-        </Switch>
-      </div>
-    </Router>
-  </BrowserRouter>
-</App>
+<Connect(ConnectedRouter)
+  history={Object {}}>
+  <div>
+    <Switch>
+      <Route
+        component={[Function]}
+        exact={true}
+        path="/" />
+      <Route
+        component={[Function]} />
+    </Switch>
+  </div>
+</Connect(ConnectedRouter)>
 `;

src/client/app/app.jsx

@@ -1,6 +1,6 @@
 /* @flow */
-import React, { Component } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import React, { Component, PropTypes } from 'react';
+import { ConnectedRouter } from 'connected-react-router/immutable';
 
 import { routes } from './routes';
 
@@ -9,14 +9,20 @@ import { routes } from './routes';
  * @extends React.Component
  */
 export class App extends Component {
+  static propTypes = {
+    history: PropTypes.object.isRequired
+  }
+
   /**
    * Render method.
    */
   render() {
+    const { history } = this.props;
+
     return (
-      <BrowserRouter>
+      <ConnectedRouter history={history}>
         { routes }
-      </BrowserRouter>
+      </ConnectedRouter>
     );
   }
 }

src/client/app/app.spec.jsx

@@ -1,12 +1,12 @@
 /* @flow */
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import { App } from './app';
 
 describe('App', () => {
   it('renders without crashing', () => {
-    const app = mount(<App />);
+    const app = shallow(<App history={{}} />);
     expect(app).toMatchSnapshot();
   });
 });

src/client/app/components/about/about.jsx

@@ -0,0 +1,30 @@
+/* @flow */
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { push } from 'connected-react-router';
+
+/**
+ * About page component.
+ * @extends React.Component
+ */
+class About extends Component {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired
+  }
+
+  /**
+   * Render method.
+   */
+  render() {
+    const { dispatch } = this.props;
+
+    return (
+      <div>
+        <h1>About</h1>
+        <button onClick={() => dispatch(push('/'))}>Go Home</button>
+      </div>
+    );
+  }
+}
+
+export const AboutContainer = connect()(About);

src/client/app/components/about/index.js

@@ -0,0 +1 @@
+export * from './about';

src/client/app/routes/index.jsx

@@ -4,11 +4,13 @@ import { Route, Switch } from 'react-router-dom';
 
 import { Home } from '../components/home';
 import { PageNotFound } from '../components/page-not-found';
+import { AboutContainer } from '../components/about';
 
 const routes = (
   <div>
     <Switch>
       <Route exact path='/' component={Home} />
+      <Route path='/about' component={AboutContainer} />
       <Route component={PageNotFound} />
     </Switch>
   </div>

src/client/main.hmr.jsx

@@ -5,6 +5,8 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import * as Immutable from 'immutable';
+import { createBrowserHistory } from 'history';
+import { connectRouter, routerMiddleware } from 'connected-react-router/immutable';
 
 import { AppContainer } from 'react-hot-loader';
 import { DevTools } from './app/containers/dev-tools';
@@ -19,12 +21,15 @@ import './main.scss';
 // favicon
 import './favicon.ico';
 
+const history = createBrowserHistory();
 const initialState = Immutable.Map();
+
 const store = createStore(
-  rootReducer,
+  connectRouter(history)(rootReducer),
   initialState,
   compose(
     applyMiddleware(
+      routerMiddleware(history),
       thunk,
       createLogger({
         stateTransformer: state => state.toJS()
@@ -39,7 +44,7 @@ const renderApp = () => {
     <AppContainer>
       <Provider store={store}>
         <div>
-          <App />
+          <App history={history} />
           <DevTools />
         </div>
       </Provider>
@@ -54,6 +59,6 @@ if (module.hot) {
   module.hot.accept('./app', renderApp);
 
   module.hot.accept('./app/reducers', () => {
-    store.replaceReducer(rootReducer);
+    store.replaceReducer(connectRouter(history)(rootReducer));
   });
 }

src/client/main.jsx

@@ -5,6 +5,8 @@ import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import * as Immutable from 'immutable';
+import { createBrowserHistory } from 'history';
+import { connectRouter, routerMiddleware } from 'connected-react-router/immutable';
 
 import { App } from './app';
 import { rootReducer } from './app/reducers';
@@ -15,16 +17,21 @@ import './main.scss';
 // favicon
 import './favicon.ico';
 
+const history = createBrowserHistory();
 const initialState = Immutable.Map();
+
 const store = createStore(
-  rootReducer,
+  connectRouter(history)(rootReducer),
   initialState,
-  applyMiddleware(thunk)
+  applyMiddleware(
+    routerMiddleware(history),
+    thunk
+  )
 );
 
 render(
   <Provider store={store}>
-    <App />
+    <App history={history} />
   </Provider>,
   document.getElementById('app')
 );

src/client/vendor.js

@@ -7,11 +7,10 @@ import 'react-router-dom';
 // Redux
 import 'redux';
 import 'react-redux';
-//import 'react-router-redux';
-
+import 'history';
+import 'connected-react-router';
 import 'immutable';
 import 'redux-immutable';
-
 import 'redux-thunk';
 
 import 'normalize.css';

yarn.lock

@@ -1862,6 +1862,14 @@ connect-history-api-fallback@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"
 
+connected-react-router@4.0.0-beta.3:
+  version "4.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-4.0.0-beta.3.tgz#f1b38944ee56860f2e56d2474ff7b3d89c8fe4b7"
+  dependencies:
+    immutable "^3.8.1"
+    lodash.topath "^4.5.2"
+    react-router "^4.0.0-beta.3"
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -3399,7 +3407,7 @@ he@1.1.x:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
 
-history@^4.5.1:
+history@4.5.1, history@^4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.5.1.tgz#44935a51021e3b8e67ebac267a35675732aba569"
   dependencies:
@@ -4745,6 +4753,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.topath@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
+
 lodash.uniq@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -4765,18 +4777,18 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
-  dependencies:
-    js-tokens "^2.0.0"
-
-loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.1.0, loose-envify@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
+  dependencies:
+    js-tokens "^2.0.0"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -6512,11 +6524,7 @@ react-router-dom@4.0.0-beta.4:
     history "^4.5.1"
     react-router "^4.0.0-beta.4"
 
-react-router-redux@4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.7.tgz#9b1fde4e70106c50f47214e12bdd888cfb96e2a6"
-
-react-router@^4.0.0-beta.4:
+react-router@^4.0.0-beta.3, react-router@^4.0.0-beta.4:
   version "4.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.0.0-beta.4.tgz#6ab21755525ae3dfe7cca5e0176b05385a7b854d"
   dependencies: