BenjaminVerble · December 29, 2015 00:50 · Aug 11, 2015 · Aug 11, 2015 · Aug 11, 2015 · Aug 11, 2015
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Instead, with this approch, your app's current `pathname` is just another piece
 
 This also means that when doing server-side rendering of a redux app, you can just do:
 
-```
+```javascript
 var app = require('your/redux/app')
 var React = require('react')
 

diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.
+
+Instead, with this approch, your app's current `pathname` is just another piece of state, just like anything else.
+
+This also means that when doing server-side rendering of a redux app, you can just do:
+
+```
+var app = require('your/redux/app')
+var React = require('react')
+
+// pass the URL like any other piece of data
+React.renderToString(app.render({url: '/about'}))
+```
+
+The [react-internal-nav](https://www.npmjs.com/package/react-internal-nav) component makes sure internal navigation clicks are captured, then we turn it into an `SET_URL` action dispatch.
+
+This example has extremely simple url matching with just a few `if` statements, but this could easily be elaborated on if you needed it, using some kind of lightweight string route matcher, such as:
+- https://www.npmjs.com/package/routes
+- https://github.com/Matt-Esch/http-hash
+- https://github.com/glassresistor/i40
+- https://github.com/bevacqua/ruta3
+
+While standalone history management tools exist, such as https://browserstate.github.io/history.js/demo/ or https://github.com/rackt/history they're concerned with proper handling the `state` part of `pushState` APIs. Personally, I don't want to put state there anyway and if you don't care about that part, the actual [browser support for plain pushState](http://caniuse.com/#search=pushState) is quite good. 
diff --git a/containers - App.js b/containers - App.js
@@ -7,8 +7,10 @@ import * as reducers from '../reducers'
 import * as UrlActions from '../actions/UrlActions'
 
 export default class App {
-  render(data) {
-    let store = createStore(createStore(reducers))
+  // note that we take data as an argument here
+  render (data) {
+    // ...and pass it through as initial state  for server rendering
+    let store = createStore(createStore(reducers), data)
 
     if (typeof window !== 'undefined') {
       window.addEventListener('popstate', () => {

diff --git a/containers - FooApp.js b/containers - FooApp.js
@@ -22,6 +22,11 @@ export default class FooApp {
     }
 
     let page
+
+    // more sophisticated url matching could easily be done with any of these:
+    // https://github.com/Matt-Esch/http-hash
+    // https://github.com/glassresistor/i40
+    // https://github.com/bevacqua/ruta3
 
     if (url === '/') {
       page = (<h1>Home</h1>)

diff --git a/containers - FooApp.js b/containers - FooApp.js
@@ -5,7 +5,6 @@ import InternalNav from 'react-internal-nav'
 import AboutPage from '../components/about-page'
 import DataPage from '../components/data-page'
 import PersonDetail from '../components/person-detail'
-import OverlayPage from './overlay-page'
 import * as UrlActions from '../actions/UrlActions'
 
 export default class FooApp {
@@ -23,11 +22,9 @@ export default class FooApp {
     }
 
     let page
-    let style
 
     if (url === '/') {
-      // render to URL as well
-      setQueryString({q: query})
+      page = (<h1>Home</h1>)
     } else if (url === '/about') {
       page = (<AboutPage/>)
     } else if (url === '/data') {
@@ -47,14 +44,6 @@ export default class FooApp {
       }
     }
 
-    if (page) {
-      page = (
-        <OverlayPage setUrl={actions.setUrl}>
-          {page}
-        </OverlayPage>
-      )
-    }
-
     return (
       <InternalNav onInternalNav={actions.setUrl}>
         <header>

diff --git a/url-actions.js → actions - UrlActions.js b/url-actions.js → actions - UrlActions.js
@@ -1,4 +1,4 @@
-import { SET_URL } from '../constants/action-types'
+import { SET_URL } from '../constants/ActionTypes'
 
 function pushState(url) {
   if (url !== window.location.pathname) {

diff --git a/action-types.js → constants - ActionTypes.js b/action-types.js → constants - ActionTypes.js
diff --git a/app.js → containers - App.js b/app.js → containers - App.js
@@ -2,9 +2,9 @@
 import React from 'react'
 import { createStore, combineReducers } from 'redux'
 import { Provider } from 'react-redux'
-import FooApp from './foo-app'
+import FooApp from './FooApp'
 import * as reducers from '../reducers'
-import * as UrlActions from '../actions/url-actions'
+import * as UrlActions from '../actions/UrlActions'
 
 export default class App {
   render(data) {
@@ -15,9 +15,7 @@ export default class App {
         store.dispatch(UrlActions.setUrl(window.location.pathname))
       })
 
-      // grab last known URL from localStorage if in iOS standalone mode
-      const start = (navigator.standalone && localStorage.lastUrl) || window.location.pathname
-      store.dispatch(UrlActions.setUrl(start))
+      store.dispatch(UrlActions.setUrl(window.location.pathname))
     }
 
     return (

diff --git a/foo-app.js → containers - FooApp.js b/foo-app.js → containers - FooApp.js
@@ -6,7 +6,7 @@ import AboutPage from '../components/about-page'
 import DataPage from '../components/data-page'
 import PersonDetail from '../components/person-detail'
 import OverlayPage from './overlay-page'
-import * as UrlActions from '../actions/url-actions'
+import * as UrlActions from '../actions/UrlActions'
 
 export default class FooApp {
   render() {

diff --git a/foo-app.js b/foo-app.js
@@ -5,7 +5,6 @@ import InternalNav from 'react-internal-nav'
 import AboutPage from '../components/about-page'
 import DataPage from '../components/data-page'
 import PersonDetail from '../components/person-detail'
-import PersonList from '../components/person-list'
 import OverlayPage from './overlay-page'
 import * as UrlActions from '../actions/url-actions'
 
@@ -60,15 +59,13 @@ export default class FooApp {
       <InternalNav onInternalNav={actions.setUrl}>
         <header>
           <nav role='navigation'>
-            <a href='/'>HubFlow.pro</a>
+            <a href='/'>Example.com</a>
             <span>
               <a href="/data">Notes</a>
               <a href="/about">About</a>
-              <a href="/login">Login</a>
             </span>
           </nav>
         </header>
-        <PersonList persons={persons} userData={userData} query={query}/>
         {page}
       </InternalNav>
     )

diff --git a/action-types.js b/action-types.js
@@ -0,0 +1 @@
+export const SET_URL = 'SET_URL'
diff --git a/app.js b/app.js
@@ -0,0 +1,29 @@
+/* global __IS_DEV__*/
+import React from 'react'
+import { createStore, combineReducers } from 'redux'
+import { Provider } from 'react-redux'
+import FooApp from './foo-app'
+import * as reducers from '../reducers'
+import * as UrlActions from '../actions/url-actions'
+
+export default class App {
+  render(data) {
+    let store = createStore(createStore(reducers))
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('popstate', () => {
+        store.dispatch(UrlActions.setUrl(window.location.pathname))
+      })
+
+      // grab last known URL from localStorage if in iOS standalone mode
+      const start = (navigator.standalone && localStorage.lastUrl) || window.location.pathname
+      store.dispatch(UrlActions.setUrl(start))
+    }
+
+    return (
+      <Provider store={store}>
+        {() => <FooApp />}
+      </Provider>
+    )
+  }
+}
diff --git a/foo-app.js b/foo-app.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { Connector } from 'react-redux'
+import InternalNav from 'react-internal-nav'
+import AboutPage from '../components/about-page'
+import DataPage from '../components/data-page'
+import PersonDetail from '../components/person-detail'
+import PersonList from '../components/person-list'
+import OverlayPage from './overlay-page'
+import * as UrlActions from '../actions/url-actions'
+
+export default class FooApp {
+  render() {
+    return (
+      <Connector>
+        {this.renderChild}
+      </Connector>
+    )
+  }
+
+  renderChild({ personData: {persons}, dispatch, url }) {
+    const actions = {
+      ...bindActionCreators(UrlActions, dispatch)
+    }
+
+    let page
+    let style
+
+    if (url === '/') {
+      // render to URL as well
+      setQueryString({q: query})
+    } else if (url === '/about') {
+      page = (<AboutPage/>)
+    } else if (url === '/data') {
+      page = (<DataPage persons={persons}/>)
+    } else {
+      let match
+      persons.some(person => {
+        if (person.slug === url.slice(1)) {
+          match = person
+          return true
+        }
+      })
+      if (match) {
+        page = (<PersonDetail person={match} {...actions}/>)
+      } else {
+        page = (<h1>404</h1>)
+      }
+    }
+
+    if (page) {
+      page = (
+        <OverlayPage setUrl={actions.setUrl}>
+          {page}
+        </OverlayPage>
+      )
+    }
+
+    return (
+      <InternalNav onInternalNav={actions.setUrl}>
+        <header>
+          <nav role='navigation'>
+            <a href='/'>HubFlow.pro</a>
+            <span>
+              <a href="/data">Notes</a>
+              <a href="/about">About</a>
+              <a href="/login">Login</a>
+            </span>
+          </nav>
+        </header>
+        <PersonList persons={persons} userData={userData} query={query}/>
+        {page}
+      </InternalNav>
+    )
+  }
+}
diff --git a/url-actions.js b/url-actions.js
@@ -0,0 +1,15 @@
+import { SET_URL } from '../constants/action-types'
+
+function pushState(url) {
+  if (url !== window.location.pathname) {
+    window.history.pushState({}, '', url)
+  }
+}
+
+export function setUrl(text) {
+  pushState(text)
+  return {
+    type: SET_URL,
+    text
+  }
+}