Merge pull request #13 from sanfilippopablo/master

Added devToolsStateSanitizer with examples

Author: grrowl

examples/chat/index.js

@@ -3,11 +3,15 @@ import ReactDOM from 'react-dom'
 import { createStore, compose, applyMiddleware } from 'redux'
 import App from './components/App'
 import counter from './reducers'
-import scuttlebutt from 'redux-scuttlebutt'
+import scuttlebutt, { devToolsStateSanitizer } from 'redux-scuttlebutt'
+
+const devToolsConfig = {
+  stateSanitizer: devToolsStateSanitizer
+}
 
 const enhancer = compose(
   applyMiddleware(scuttlebutt),
-  window.devToolsExtension ? window.devToolsExtension() : f => f,
+  window.devToolsExtension ? window.devToolsExtension(devToolsConfig) : f => f,
 )
 
 const store = createStore(counter, undefined, enhancer)

examples/counter/index.js

@@ -4,11 +4,15 @@ import { createStore, compose, applyMiddleware } from 'redux'
 import Counter from './components/Counter'
 import App from './components/App'
 import counter from './reducers'
-import scuttlebutt from 'redux-scuttlebutt'
+import scuttlebutt, { devToolsStateSanitizer } from 'redux-scuttlebutt'
+
+const devToolsConfig = {
+  stateSanitizer: devToolsStateSanitizer
+}
 
 const enhancer = compose(
   scuttlebutt(),
-  window.devToolsExtension ? window.devToolsExtension() : f => f,
+  window.devToolsExtension ? window.devToolsExtension(devToolsConfig) : f => f,
 )
 
 const store = createStore(counter, undefined, enhancer)

src/index.js

@@ -134,3 +134,8 @@ function connectStreams(io, createStream) {
   })
 
 }
+
+// devToolsStateSanitizer can be applied to the devToolsExtension
+// as the stateSanitizer to show correctly the store state instead
+// of showing the internal representation of redux-scuttlebutt
+export const devToolsStateSanitizer = (state) => state.slice(-1)[0][3]