working examples route

docs/src/App.jsx

@@ -1,6 +1,12 @@
 import React, { Component } from 'react'
+import Routes from 'ion-router/Routes'
+import Route from 'ion-router/Route'
+import Link from 'ion-router/Link'
+
 import './App.css'
-import Example from './components/Example'
+import Examples from './components/Examples'
+import ExamplesToggle from './toggles/ExamplesToggle'
+import * as actions from './redux/actions'
 
 class App extends Component {
   render() {
@@ -10,10 +16,26 @@ class App extends Component {
           <h2>Welcome</h2>
         </div>
         <div className="App-intro">
-          <Example example="basic" />
+          <ul>
+            <li><Link route="examples">Examples</Link></li>
+          </ul>
+          <ExamplesToggle component={Examples} />
         </div>
+        <Routes>
+          <Route name="home" path="/">
+            <Route
+              name="examples"
+              path="examples(/:example)"
+              stateFromParams={params => params}
+              paramsFromState={state => state}
+              updateState={{
+                example: name => actions.chooseExample(name)
+              }}
+            />
+          </Route>
+        </Routes>
       </div>
-    );
+    )
   }
 }
 

docs/src/components/Examples.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import Link from 'ion-router/Link'
+import ExampleToggle from '../toggles/ExampleToggle'
+import thing from './Example'
+
+const Example = connect(state => ({
+  example: state.examples.example
+}))(thing)
+
+export default function Examples() {
+  return (
+    <div>
+      <ul>
+        <li><Link route="examples" example="basic">Basic</Link></li>
+      </ul>
+      <ExampleToggle component={Example} />
+    </div>
+  )
+}

docs/src/index.js

@@ -1,9 +1,30 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
+import { Provider, connect } from 'react-redux'
+import makeRouter, { makeRouterMiddleware } from 'ion-router'
+import routing from 'ion-router/reducer'
+import examples from './redux/example'
+
 import App from './App'
 import './index.css'
 
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose // eslint-disable-line
+const reducer = combineReducers({
+  routing,
+  examples
+})
+
+
+// set up the router and create the store
+const routerMiddleware = makeRouterMiddleware()
+const store = createStore(reducer, undefined,
+  composeEnhancers(applyMiddleware(routerMiddleware)))
+makeRouter(connect, store)
+
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('root')
 );

docs/src/redux/actions.js

@@ -0,0 +1,8 @@
+import * as types from './types'
+
+export function chooseExample(example) {
+  return {
+    type: types.CHOOSE_EXAMPLE,
+    payload: example
+  }
+}

docs/src/redux/example.js

@@ -0,0 +1,18 @@
+import * as types from './types'
+
+const defaultState = {
+  example: false
+}
+
+export default function reducer(state = defaultState, action) {
+  if (!action || !action.type) return state
+  switch (action.type) {
+    case types.CHOOSE_EXAMPLE:
+      return {
+        ...state,
+        example: action.payload
+      }
+    default:
+      return state
+  }
+}

docs/src/redux/types.js

@@ -0,0 +1 @@
+export const CHOOSE_EXAMPLE = 'CHOOSE_EXAMPLE'

docs/src/toggles/ExampleToggle.js

@@ -0,0 +1,3 @@
+import Toggle from 'ion-router/Toggle'
+
+export default Toggle(state => state.examples.example)

docs/src/toggles/ExamplesToggle.js

@@ -0,0 +1,3 @@
+import RouteToggle from 'ion-router/RouteToggle'
+
+export default RouteToggle('examples')