Color link, apply to todo example, and generalize store access

examples/todomvc/containers/App.js

@@ -1,14 +1,19 @@
 import React, { Component } from 'react';
 import TodoApp from './TodoApp';
 import { createStore, combineReducers, compose } from 'redux';
-import { devTools, persistState } from 'redux-devtools';
+import { devTools, persistState, urlState } from 'redux-devtools';
 import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
 import { Provider } from 'react-redux';
 import * as reducers from '../reducers';
 
+
+const devStateJsonMatches = window.location.href.match(/[?&]dev_state=([^&]+)\b/);
+const devStateJson = devStateJsonMatches ? devStateJsonMatches[1] : null;
+
 const finalCreateStore = compose(
   devTools(),
-  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
+  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
+  urlState(devStateJson)
 )(createStore);
 
 const reducer = combineReducers(reducers);

src/react/LinkToState.js

@@ -1,16 +1,21 @@
 import React, { PropTypes, Component } from 'react';
+import { getUrlForState } from '../urlState';
 
-export default class LogMonitor extends Component {
+const styles = {
+  link: {
+    color: '#6FB3D2'
+  }
+};
+
+export default class LinkToState extends Component {
   static propTypes = {
-    computedState: PropTypes.object.isRequired
+    fullAppState: PropTypes.object.isRequired
   };
 
   render() {
-    const stateUriComponent = encodeURIComponent(JSON.stringify(this.props.computedState));
-
-    // TODO: don't blow away other params
-    const urlForThisState = `?reduxDevState=${stateUriComponent}`;
-
-    return <a href={urlForThisState}>Current State</a>;
+    const urlForState = getUrlForState(this.props.fullAppState);
+    return <a style={{...styles.link}} href={urlForState}>
+      Current State
+    </a>;
   }
 }

src/react/LogMonitor.js

@@ -178,8 +178,6 @@ export default class LogMonitor extends Component {
       );
     }
 
-    const currentState = computedStates[computedStates.length - 1];
-    
     return (
       <div style={{...styles.container, backgroundColor: theme.base00}}>
         <div style={{...styles.buttonBar, borderColor: theme.base02}}>
@@ -189,7 +187,7 @@ export default class LogMonitor extends Component {
           <LogMonitorButton theme={theme} onClick={::this.handleCommit} enabled={computedStates.length > 1}>Commit</LogMonitorButton>
         </div>
         <div>
-          <LinkToState computedState={{ monitorState, skippedActions, stagedActions, computedStates, select }} />
+          <LinkToState fullAppState={ this.props.store.getState() } />
         </div>
         <div style={styles.elements} ref="elements">
           {elements}

src/urlState.js

@@ -13,6 +13,12 @@ function deserializeState(json) {
   }
 }
 
+export function getUrlForState(state) {
+  const stateUriComponent = serializeState(state);
+
+  // TODO: don't blow away other params
+  return `?dev_state=${stateUriComponent}`;
+}
 
 export default function urlEncodedStateReducer(stateUriComponent) {
   return next => (reducer, initialState) => {