redux-devtools/extension/docs/Troubleshooting.md

Troubleshooting

I just see empty log or "No store found"

Make sure you applied the enhancer. Note that passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like here or here.

Don't mix the old Redux API with the new one. Pass enhancers and applyMiddleware as last createStore argument.

Access file url (file:///)

If you develop on your local filesystem, make sure to allow Redux DevTools access to file:/// URLs in the settings of this extension:

It shows only the @@INIT action or moving back and forth doesn't update the state

Most likely you mutate the state. Check it by adding redux-immutable-state-invariant middleware.

Another cause could be that you are creating multiple stores, which means that the devtools get attached to one but the application uses another. See [https://github.com/reduxjs/redux-toolkit/issues/2753](this issue).

@@INIT or REPLACE action resets the state of the app or last actions RE-APPLIED

@@redux/REPLACE (or @@INIT) is used internally when the application is hot reloaded. When you use store.replaceReducer the effect will be the same as for hot-reloading, where the extension is recomputing all the history again. To avoid that set shouldHotReload parameter to false.

It doesn't work with other store enhancers

Usually the extension's store enhancer should be last in the compose. When you're using window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ or composeWithDevTools helper you don't have to worry about the enhancers order. However some enhancers (like redux-batched-subscribe) also have this requirement to be the last in the compose. In this case you can use it like so:

const store = createStore(
  reducer,
  preloadedState,
  compose(
    // applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__
      ? window.__REDUX_DEVTOOLS_EXTENSION__()
      : (noop) => noop,
    batchedSubscribe(/* ... */)
  )
);

Where batchedSubscribe is redux-batched-subscribe store enhancer.

Excessive use of memory and CPU

That is happening due to serialization of some huge objects included in the state or action. The solution is to sanitize them.

You can do that by including/omitting data containing specific values, having specific types... In the example below we're omitting parts of action and state objects with the key data (in case of action only when was dispatched action FILE_DOWNLOAD_SUCCESS):

const actionSanitizer = (action) =>
  action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data
    ? { ...action, data: '<<LONG_BLOB>>' }
    : action;
const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__({
      actionSanitizer,
      stateSanitizer: (state) =>
        state.data ? { ...state, data: '<<LONG_BLOB>>' } : state,
    })
);

There's a more advanced example on how to implement that for ui-router.

The extension is in different process and cannot access the store object directly, unlike vanilla redux-devtools which doesn't have this issue. In case sanitizing doesn't fit your use case, you might consider including it directly as a react component, so there will be no need to serialize the data, but it would add some complexity.

It fails to serialize data when passing synthetic events or calling an action directly with redux-actions

React synthetic event cannot be reused for performance reason. So, it's not possible to serialize event objects you pass to action payloads.

1. The best solution is not to pass the whole event object to reducers, but the data you need:

function click(event) {
  return {
    type: ELEMENT_CLICKED,
-    event: event
+    value: event.target.value
  };
}

2. If you cannot pick data from the event object or, for some reason, you need the whole object, use event.persist() as suggested in React Docs, but it will consume RAM while not needed.

   function increment(event) {
   + event.persist();
     return {
       type: ELEMENT_CLICKED,
       event: event,
     };
   }
   

3. A workaround, to pass the whole object and at the same time not to persist it, is to override this key of the stringified payload in your action creator. Add a custom toJSON function right in the action object (which will be called by the extension before accessing the object):

   function increment(event) {
     return {
       type: ELEMENT_CLICKED,
       event: event,
   +   toJSON: function (){
   +     return { ...this, event: '[Event]' };
   +   }
     };
   }
   

   Note that it shouldn't be arrow function as we want to have access to the function's this.

   As we don't have access to the original object, skipping and recomputing actions during hot reloading will not work in this case. We recommend to use the first solution whenever possible.

Symbols or other unserializable data not shown

To get data which cannot be serialized by JSON.stringify, set serialize parameter:

const store = Redux.createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__({
      serialize: true,
    })
);

It will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.