Router middleware (piotrwitek#177)

* Add 'connected-react-router' store middleware

* Add ConnectedRouter provider to App

Author: incerta

README.md

@@ -1102,12 +1102,16 @@ import { RootAction, RootState, Services } from 'MyTypes';
 import { createStore, applyMiddleware } from 'redux';
 import { createEpicMiddleware } from 'redux-observable';
 import { createBrowserHistory } from 'history';
+import { routerMiddleware as createRouterMiddleware } from 'connected-react-router';
 
 import { composeEnhancers } from './utils';
 import rootReducer from './root-reducer';
 import rootEpic from './root-epic';
 import services from '../services';
 
+// browser history
+export const history = createBrowserHistory();
+
 export const epicMiddleware = createEpicMiddleware<
   RootAction,
   RootAction,
@@ -1117,17 +1121,16 @@ export const epicMiddleware = createEpicMiddleware<
   dependencies: services,
 });
 
+const routerMiddleware = createRouterMiddleware(history);
+
 // configure middlewares
-const middlewares = [epicMiddleware];
+const middlewares = [epicMiddleware, routerMiddleware];
 // compose enhancers
 const enhancer = composeEnhancers(applyMiddleware(...middlewares));
 
 // rehydrate state on app start
 const initialState = {};
 
-// browser history
-const history = createBrowserHistory();
-
 // create store
 const store = createStore(rootReducer(history), initialState, enhancer);
 

playground/src/App.tsx

@@ -1,14 +1,17 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
 
-import store from './store';
+import store, { history } from './store';
 import Home from './routes/Home';
 
 class App extends Component {
   render() {
     return (
       <Provider store={store}>
-        <Home />
+        <ConnectedRouter history={history}>
+          <Home />
+        </ConnectedRouter>
       </Provider>
     );
   }

playground/src/store/index.ts

@@ -2,12 +2,16 @@ import { RootAction, RootState, Services } from 'MyTypes';
 import { createStore, applyMiddleware } from 'redux';
 import { createEpicMiddleware } from 'redux-observable';
 import { createBrowserHistory } from 'history';
+import { routerMiddleware as createRouterMiddleware } from 'connected-react-router';
 
 import { composeEnhancers } from './utils';
 import rootReducer from './root-reducer';
 import rootEpic from './root-epic';
 import services from '../services';
 
+// browser history
+export const history = createBrowserHistory();
+
 export const epicMiddleware = createEpicMiddleware<
   RootAction,
   RootAction,
@@ -17,17 +21,16 @@ export const epicMiddleware = createEpicMiddleware<
   dependencies: services,
 });
 
+const routerMiddleware = createRouterMiddleware(history);
+
 // configure middlewares
-const middlewares = [epicMiddleware];
+const middlewares = [epicMiddleware, routerMiddleware];
 // compose enhancers
 const enhancer = composeEnhancers(applyMiddleware(...middlewares));
 
 // rehydrate state on app start
 const initialState = {};
 
-// browser history
-const history = createBrowserHistory();
-
 // create store
 const store = createStore(rootReducer(history), initialState, enhancer);