Redux-devtools: Redux dev tools unresponsive and crashes after triggering a couple of actions

[ejosafat]

I open the devtools after the initial loading of the page and everything is fine. You see all the actions emitted at the beginning (fetch actions -using Sagas-), and you can see the state. However after triggering sometimes one, others a couple of actions when interacting with my app UI, it gets completely unresponsive and at some point it crashes. The actions triggered just have a boolean as payload (the open state of a certain menu), so I've ruled out that an excessive payload will be the problem. I've also uninstalled and reinstalled it again, but the problem persists. I even remoded the hot module replacement for reducers just in case but it didn't fix it.

This is the action I use to test this:

export const TOGGLE_PORTAL_SELECTOR: string = 'TOGGLE_PORTAL_SELECTOR';
export function togglePortalSelector(portalSelectorOpen: boolean): Action {
  return {
    type: TOGGLE_PORTAL_SELECTOR,
    portalSelectorOpen,
  };
}

the reducer:

  switch (action.type) {
    case actions.TOGGLE_PORTAL_SELECTOR: {
      return { ...state, portalSelectorOpen: action.portalSelectorOpen };
    }

and this is the initialisation of the store:

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../sagas';

const sagaMiddleware = createSagaMiddleware();
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;

function configureStore(initialState) {
  // Build the middleware for intercepting and dispatching navigation actions

  const createStoreWithMiddleware = composeEnhancers(applyMiddleware(
    sagaMiddleware,
  ))(createStore);

  const store = createStoreWithMiddleware(rootReducer, initialState);
  sagaMiddleware.run(rootSaga);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      // eslint-disable-next-line global-require
      const nextReducer = require('../reducers/index').default;

      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

export default configureStore;

I'm using Chrome Version 71.0.3578.98 (Official Build) (64-bit) on Linux, Redux Dev Tools 2.17.0.

Any idea what could be causing this would be much appreciated.

[zalmoxisus]

The excessive payload should be the problem indeed. There should be a warning in the console with the link to how to sanitize it. You can find it here.

In future you'll be able to use redux-devtools-core instead of extension, so there will be no need for serialization, but cannot give any ETA yet. There's also redux-devtools which can be included as a React component, but with less features than the extension, and more difficult to implement.

[ejosafat]

Thanks for the tip! Don't have any blobs but certainly some actions carry tons of data getched the api so it's probably running out of memory, I'll try to limit the number of actions recorded and reduce the number of records in the api calls.

[Anzumana]

I currently have the same issue.
a quick workaround is to switch to the log monitor.
That worked for me.

[Dara-To]

I have the same issue. It crashed with no warnings and when reloaded, does not store any info on the redux store, just empty.

"redux-devtools-extension": "^2.13.8"

This is my store.

const allReducers = combineReducers({
  main: MainReducer,
  theme: ThemeReducer,
  banner: BannerReducer,
  dropboxFiles: DropboxFilesReducer,
  subscription: SubscriptionReducer,
  team: GetMembersReducer,
  sidebar: SwitchSidebar,
})

const initialState = {
  main: MainReducer(),
  theme: ThemeReducer(),
  banner: BannerReducer(),
  dropboxFiles: DropboxFilesReducer(),
  subscription: SubscriptionReducer(),
  team: GetMembersReducer(),
  sidebar: SwitchSidebar()
}

const store = createStore(
  allReducers,
  initialState,
  composeWithDevTools(applyMiddleware(thunk))
);

Is there a way without serializing or sanitizing it? It's hard to understand and there are not enough concrete examples. I really don't want to get there or else, I'd just work with console logs.

[JochemG]

I had the same issue. I had a large object in the redux store. Adding <myLargeObject>.toJSON = () => ({hidden: 'to help redux devtools :)'}) before dispatching the action fixed it for me.

Note that it will show up this way as well in the devTools, but that was not a problem for me.