redux-devtools-extension

redux-devtools-extension copied to clipboard

I setup the extension as specified in the docs

import { applyMiddleware, compose, createStore } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const enhancer = composeEnhancers(applyMiddleware(thunk));
const store = createStore(rootReducer, enhancer);

export default store;

But there are always multiple instances listed in the dropdown:

Also autoselect instance does not seem to work. Why are there multiple instances listed? It would be great to be able to open the devtools and immediately see the useful actions.

Thanks!

Bumping this as I have also run into this issue on multiple projects. Thanks!

@zalmoxisus any idea what might be causing the above issue?

Hi. Related but somewhat different. I have a situation where I am rendering a separate store per each component I render. It correctly displays all the instances in the dropdown and adds more when I add more. However, when any of the components are unmounted the instances remain active in this menu. I feel as though this is not correct behaviour and may be contributing to the issues mentioned here

Same issue here.

same issue here as well

Sam here

same here

Hi Any updates on this issue?

I'm also facing this problem here.

"@ngrx/store": "5.2.0",
  "@ngrx/store-devtools": "5.2.0",

@rogeriosantos92 that's from @ngrx/store-devtools part, it's not destroying previous instance and creating a new one, the extension shows what it receives from there. Unfortunately, I'm not using ngrx and would be great if someone else can look into that. Also refer to #314.

Regarding the reports for Redux, it would be useful if someone can provide an example to reproduce the issue. I saw something similar with webpack hot reloading the app.

I noticed this happening with a react-hot-loader setup. Each time I update a component it will create a new instance. My setup might be wrong tho.

@vhpoet it is related to webpack hot reloader, as it was running the script in a new iframe on every hot-reloading, I fixed that with adding a delay, but that was some years ago and something might been changed. If you can share an example repo I'd look into it.

@zalmoxisus I was mistakenly replacing the store on every hot load by calling https://redux.js.org/api/store#replaceReducer, but I think it should just replace the store in the devtools instead of creating a new one.

@vhpoet you can do that and it shouldn't cause issues, we're doing that in our examples.

I got same problem with vanilla CRA app (v2) not with hot reloading but the default auto refreshing behavior

It would be great if we could set in settings to only display instances of the current window or tab. Otherwise, it's difficult to know which is the instance of the current tab if you set a name in options and open a multiple tabs of the same page.

So regarding the current issue. This somehow seems to solve the issue:

const devtools = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
const enhancer = devtools && devtools({ name: 'Whatever', instanceId: 1 })
...
const AppExample = () => {
   React.useEffect(() => () => devtools && devtools.connect({ instanceId: 1 }).unsubscribe()), [])
   ....
}

This is a React (speudo-code) example. The idea was to disallow action from dev tools once the app is no longer mounted. This kind of works, dispatching is prevented. However, it doesn't disappear from the instances list. Although, I doubt this is the best approach.

I ended up doing:

devtools && devtools.disconnect()

This works ... as long as there is only one listener. However, other stores are also unsubscribed when doing this which is undesirable.

So what are those instances and what do they exactly mean?

I have 2 items with the same name in that drop-down in a basic app. The first one lists my actions, while the second one is empty. Here is a screencast of the issue: https://www.screencast.com/t/7UoAbeAPh

I underline that I don't create many stores, I'm using just one:

From my index.js:

import { createStore, applyMiddleware, compose  } from "redux";
import createSagaMiddleware from "redux-saga";

import rootReducer from "./store/reducers";
import rootSaga from "./store/sagas";

// noinspection JSUnresolvedVariable
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(logger, sagaMiddleware))
);
sagaMiddleware.run(rootSaga);

What I do wrong?

Houstan we have a problem, having same issue :(

Same here

Same here. Using redux-toolkit with Next js..

Same problem, using redux-toolkit with CRA

Same here. Using redux-toolkit with Next js..

In my case, the problem was solved by using the next-redux-wrapper library

I had this issue whilst implementing React Admin in another application. Took me a moment to figure out that the issue was that the boilerplate code I copied over for initialising the store meant a new store was initialised on each render:

const App = () => (
    <Provider
        store={createAdminStore({
            authProvider,
            dataProvider,
            history,
        })}
    >
        <Admin
            authProvider={authProvider}
            dataProvider={dataProvider}
            history={history}
            title="My Admin"
        >
        ...
    </Provider>
);

Solution was to initiate store outside of the component (SO post)

I had the same issue, fixed it by initializing the store in another file outside the _app component. Using NextJs

Just noticed the readme if this repository says:

This repo is no longer the home of the redux-devtools-extension. The new home is https://github.com/reduxjs/redux-devtools. Please file your issues and PRs there.