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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:9
  • Comments:5

github_iconTop GitHub Comments

7reactions
JochemGcommented, Dec 14, 2019

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.

7reactions
Anzumanacommented, Feb 6, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Redux dev tool crashing when I use this action - Stack Overflow
If the Redux DevTools detect a flow of actions that consume too many resources this will crash because can handle all the "side...
Read more >
Use sanitizers to avoid Redux Devtools crash
The problem. I started debugging and find out that we were saving a few problematic things into the store. The idea is to...
Read more >
Angular Ngrx DevTools: Important Practical Tips
Tips to be aware of when first setting up the Ngrx DevTools - prevent the DevTools from freezing, Router integration, Ngrx Store Freeze...
Read more >
@ngrx/store-devtools | Yarn - Package Manager
store-devtools: add redux dev tool trace support (#3517 (#3665 (187802a), closes #1868 ... component: clear LetDirective view when replaced observable is in ...
Read more >
Remote Redux DevTools - npm
Relay Redux actions to remote Redux DevTools.. Latest version: 0.7.5, last published: 6 months ago. Start using @redux-devtools/remote in ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found