grrowl / redux-scuttlebutt

Distributed replicated redux store
170 stars 14 forks source link

Added devToolsStateSanitizer with examples #13

Closed sanfilippopablo closed 7 years ago

sanfilippopablo commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Oh, yeah. That's a good one.

Great! Happy to help.

zalmoxisus commented 7 years ago

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 commented 7 years ago

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