From 5d6c893766ce2375f1d82c959fdfdc66a9f0ff2e Mon Sep 17 00:00:00 2001
From: Nathan Wenneker <nathan@preferral.com>
Date: Thu, 24 Dec 2015 17:03:10 -0700
Subject: [PATCH] Introduce alternative redux-driven history approach

---
 examples/basic/ReduxRouterHistory.js | 59 ++++++++++++++++++++++++++++
 examples/basic/app.js                | 13 ++++--
 examples/basic/components/App.js     |  9 +++--
 examples/basic/package.json          |  7 ++--
 4 files changed, 77 insertions(+), 11 deletions(-)
 create mode 100644 examples/basic/ReduxRouterHistory.js

diff --git a/examples/basic/ReduxRouterHistory.js b/examples/basic/ReduxRouterHistory.js
new file mode 100644
index 0000000..1bb8abc
--- /dev/null
+++ b/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;
+
+}
diff --git a/examples/basic/app.js b/examples/basic/app.js
index a6213f8..6daa6f4 100644
--- a/examples/basic/app.js
+++ b/examples/basic/app.js
@@ -4,7 +4,11 @@ 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');
 
@@ -12,7 +16,7 @@ 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()
@@ -20,12 +24,13 @@ const finalCreateStore = compose(
 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}/>
diff --git a/examples/basic/components/App.js b/examples/basic/components/App.js
index dbfa5b8..534d559 100644
--- a/examples/basic/components/App.js
+++ b/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);
diff --git a/examples/basic/package.json b/examples/basic/package.json
index caa3205..0da38f5 100644
--- a/examples/basic/package.json
+++ b/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",