Redux-devtools-extension: Problems displaying action objects

[luisherranz]

We are having troubles reading our action objects from redux-dev-tools since a week or so.

Sometimes the action object is ok:

But sometimes the action object is somehow displayed incorrectly:

This seems to be happening randomly, even with the same actions, like in the images. It didn't happen before, for example the action of the images is quite old, so definitively is something which has changed lately.

We'd love to help so if we can do any test or something let me know. We are running Chrome v56 and Redux DevTools Extension v2.9.2.

[zalmoxisus]

Yes, we are not showing circular references now by default, for performance reason. If you want to see circular structures in the extension's monitors (instead of the simplified path) just set serializeState parameter to false:

import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import thunk from 'redux-thunk';
import rootReducer from './reducers/reducers';

+ const composeEnhancers = composeWithDevTools({
+   serializeState: false
+ });

export const store = createStore(
    rootReducer,
-    composeWithDevTools(applyMiddleware(thunk))
+    composeEnhancers(applyMiddleware(thunk))
);

[zalmoxisus]

In case you didn't intend to have circular references in your states and it happen accidentally, here's how you can spot it.

[luisherranz]

Thanks for your answer @zalmoxisus.

We don't use composeWithDevTools and thunk. We use this:

compose(
    reduxReactRouter({ createHistory: require('history').createHistory }),
    applyMiddleware(sagaMiddleware),
    typeof window !== 'undefined' && window.devToolsExtension ? window.devToolsExtension() : f => f
  )

I'll try to update our code to composeWithDevTools to see if that helps.

[luisherranz]

It didn't work with composeEnhancers.

const composeEnhancers = composeWithDevTools({
  serializeState: false,
});

export const store = createStore(
  combineReducers(reducers),
  composeEnhancers(
    reduxReactRouter({ createHistory: require('history').createHistory }),
    applyMiddleware(sagaMiddleware),
  )
);

[luisherranz]

The errors seems quite random:

The same actions sometimes are fine and sometimes they are not.

[luisherranz]

Any other ideas on what to explore?

[zalmoxisus]

@luisherranz, sorry, you should set serializeState to true, not to false.

It appears randomly depending on what part of the history is sent to the extension.

Using the npm package is not mandatory. It could be use also as following:

const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        serializeState: true
      }) : compose;

  const enhancer = composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers if any
  );
  const store = createStore(reducer, enhancer);

[luisherranz]

@zalmoxisus thanks.

If I set serializeState to true, my app doesn't connect to ReduxDevTools. There is no action or selection available. It's like ReduxDevTools doesn't see it anymore:

If I go back to false, it works again.

[zalmoxisus]

@luisherranz, do you get any errors on the console?

[luisherranz]

Oh, sorry. Yes, I'm getting Uncaught TypeError: Cannot read property 'toJS' of null when I try to open ReduxDevTools.

[zalmoxisus]

@luisherranz, could you please paste the fragment of code which throws? It shouldn't happen as the value is checked before that.

Update: Didn't know that typeof null is object O_o.

[luisherranz]

Update: Didn't know that typeof null is object O_o.

Yeah, that's one of those funny things about JS.

[luisherranz]

@luisherranz, could you please paste the fragment of code which throws? It shouldn't happen as the value is checked before that.

The error kicks in when I click on the ReduxDevTools icon to see the interface:

[zalmoxisus]

It's fixed in 2.10.0.1 (should be available in maximum an hour on Chrome store). Also { serializeState: false } works now, it takes care only of circular references, while setting it to true serialize all special types (being much slower).

[luisherranz]

Awesome @zalmoxisus :)

I'll try updating Chrome within an hour and I'll let you know.

[zalmoxisus]

Should work. If not, feel free to reopen the issue.

[luisherranz]

Yes, confirmed this is working fine again with 2.10.1! Sorry for the lack of feedback, I've been out of the office these days.