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

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.

[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.

[Anzumana]

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