Added devToolsStateSanitizer with examples

[sanfilippopablo]

The problem

redux-scuttlebutt made the use of the redux devtools extension more painful, because it shows the internal representation of redux-scuttlebutt (the array of actions and states) and you'd have to go to the last item in the array and the last item of that item (the state) to view the state.

The solution

Thanks to redux-devtools-extension configuration options, we can add a stateSanitizer that prepares the state to show in the Monitor.

Use

The examples show how to use the devToolsStateSanitizer, but just to give you a peak:

import scuttlebutt, { devToolsStateSanitizer } from 'redux-scuttlebutt'

const devToolsConfig = {
  stateSanitizer: devToolsStateSanitizer
}

const enhancer = compose(
  scuttlebutt(),
  window.devToolsExtension ? window.devToolsExtension(devToolsConfig) : f => f,
)

const store = createStore(reducer, undefined, enhancer)

[sanfilippopablo]

Note: this doesn't enable all the functionality of the dev tools (like time travel) but at least let you inspect the state properly.

[grrowl]

This is amazing, thank you for the contribution! My only suggestion is to use UPDATE_SNAPSHOT instead of [3], but I'm happy to make this change tonight when I test and we'll get this merged 😁

[sanfilippopablo]

Oh, yeah. That's a good one.

Great! Happy to help.

[zalmoxisus]

Looks amazing. Just please use window.__REDUX_DEVTOOLS_EXTENSION__ instead of window.devToolsExtension in the examples. The latter is planned to be deprecated as per https://github.com/zalmoxisus/redux-devtools-extension/issues/202.

Not sure it's the case, but there's also a new introduced serialize parameter, which unlike stateSanitizer can restore the data back when persisting and exporting / importing. See how we do it for ImmutableJS.

[grrowl]

I'd enthusiastically accept a PR, or am able to implement it after the security stuff is released. Thanks!