Introduce alternative redux-driven history approach

Author: gladtocode

examples/basic/ReduxRouterHistory.js

@@ -0,0 +1,59 @@
+import uid from 'uid';
+import { createMemoryHistory } from 'history';
+
+const CHANGE_LOCATION = 'CHANGE_LOCATION';
+
+export function changeLocation(location) {
+  return { type: CHANGE_LOCATION, location, id: uid() };
+}
+
+export function historyReducer(state = { id: null }, action) {
+  if(action.type === CHANGE_LOCATION) {
+    return { id: action.id, location: action.location };
+  }
+  return state;
+}
+
+export function createReduxRouterHistory(browserHistory, store) {
+  const memoryHistory = createMemoryHistory();
+  let lastId = null;
+  let storeListeningToBrowser = true;
+  let browserListeningToStore = true;
+
+  store.subscribe(() => {
+    const history = store.getState().history;
+
+    if(lastId !== history.id) {
+      lastId = history.id;
+
+      console.log("pushing to memoryHistory from store subscriber");
+      memoryHistory.push(history.location);
+
+      if(browserListeningToStore) {
+        console.log("pushing to browserHistory from store subscriber");
+        storeListeningToBrowser = false;
+        browserHistory.push(history.location);
+        storeListeningToBrowser = true;
+      }
+    }
+  });
+
+  browserHistory.listen((location) => {
+    if(storeListeningToBrowser) {
+      console.log("got new location in browserHistory listener, sending to store")
+      browserListeningToStore = false;
+      store.dispatch(changeLocation(location));
+      browserListeningToStore = true;
+    }
+  });
+
+  const reduxRouterHistory = Object.assign({}, memoryHistory, {
+    push: function(location) {
+      console.log("Got push in reduxRouterHistory (i.e. <Link/>). sending to store");
+      store.dispatch(changeLocation(location));
+    }
+  });
+
+  return reduxRouterHistory;
+
+}

examples/basic/app.js

@@ -4,28 +4,33 @@ const { compose, createStore, combineReducers } = require('redux');
 const { Provider } = require('react-redux');
 const { Router, Route, IndexRoute } = require('react-router');
 const createHistory = require('history/lib/createHashHistory');
-const { syncReduxAndRouter, routeReducer } = require('redux-simple-router');
+// const { syncReduxAndRouter, routeReducer } = require('redux-simple-router');
+
+import { createReduxRouterHistory, historyReducer} from './ReduxRouterHistory';
+
+
 import { devTools } from 'redux-devtools';
 const { DevTools, DebugPanel, LogMonitor } = require('redux-devtools/lib/react');
 
 const reducers = require('./reducers');
 const { App, Home, Foo, Bar } = require('./components');
 
 const reducer = combineReducers(Object.assign({}, reducers, {
-  routing: routeReducer
+  history: historyReducer
 }));
 const finalCreateStore = compose(
   devTools()
 )(createStore);
 const store = finalCreateStore(reducer);
 const history = createHistory();
 
-syncReduxAndRouter(history, store);
+// syncReduxAndRouter(history, store);
+const reduxRouterHistory = createReduxRouterHistory(history, store);
 
 ReactDOM.render(
   <Provider store={store}>
     <div>
-      <Router history={history}>
+      <Router history={reduxRouterHistory}>
         <Route path="/" component={App}>
           <IndexRoute component={Home}/>
           <Route path="foo" component={Foo}/>

examples/basic/components/App.js

@@ -1,9 +1,10 @@
 const React = require('react');
 const { Link } = require('react-router');
 const { connect } = require('react-redux');
-const { pushPath } = require('redux-simple-router');
+// const { pushPath } = require('redux-simple-router');
+import { changeLocation } from '../ReduxRouterHistory';
 
-function App({ pushPath, children }) {
+function App({ changeLocation, children }) {
   return (
     <div>
       <header>
@@ -16,7 +17,7 @@ function App({ pushPath, children }) {
         <Link to="/bar">Bar</Link>
       </header>
       <div>
-        <button onClick={() => pushPath('/foo')}>Go to /foo</button>
+        <button onClick={() => changeLocation('/foo')}>Go to /foo</button>
       </div>
       <div style={{marginTop: '1.5em'}}>{children}</div>
     </div>
@@ -25,5 +26,5 @@ function App({ pushPath, children }) {
 
 module.exports = connect(
   null,
-  { pushPath }
+  { changeLocation }
 )(App);

examples/basic/package.json

@@ -2,13 +2,14 @@
   "name": "rsr-basic-example",
   "version": "0.0.0",
   "dependencies": {
-    "history": "^1.14.0",
+    "history": "1.17.0",
     "react": "^0.14.2",
     "react-dom": "^0.14.2",
     "react-redux": "^4.0.0",
-    "react-router": "^1.0.0",
+    "react-router": "1.0.3",
     "redux": "^3.0.4",
-    "redux-simple-router": "0.0.8"
+    "redux-simple-router": "0.0.8",
+    "uid": "0.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.1.21",