Many Redux Instances

[matthewoestreich]

Expected behavior

• Only one instance in Redux

Actual behavior

• Many Redux instances

Steps to reproduce

• Go to here (an example in this repo) and click on the 'Simple Vertical List' example
• Or go here (direct link to CodeSandbox)

Suggested solution?

Make it so there is only one Redux instance..

What version of React are you using?

^16.8.6

What version of react-beautiful-dnd are you running?

11.0.5 - whichever version the examples in your repo are using have this issue..

What browser are you using?

Chrome & Firefox

Demo

https://ql08j35j3q.csb.app/ (this is an example provided in your repo)

Sometimes many more instances show up than this..

[alexreardon]

I wonder if it is caused by the dev tools not releasing stores after an unmount

[matthewoestreich]

I wonder if it is caused by the dev tools not releasing stores after an unmount

That's a good question.. I did a little bit of research on this issue and apparently namespacing your reducers, etc.. helps resolve this.

I first discovered this issue using a library called material-table (which uses this library) - and it's even worse in that library.. See this issue here..

Do you think this is causing slowness or any negative effects?

Is there a way to track Redux instances without using DevTools to see if your theory "holds water"?

[log901108]

did it fix? or any solution? I faced this issue in my project with using material-table. I checked the example of beutiful-dnd you mentioned, but it does not seem to occur the issue. I don't know how to fix it in my project.:(

[matthewoestreich]

@log901108 I do not believe there has been a fix for this, unfortunately.

[log901108]

Is this issue only you and me faced? : ( why there is no one who care about this issue?

[matthewoestreich]

@log901108 thats a great question. I have had this issue open for a while now...

[Lumyo]

It looks like each DragDropContext component is creating a separate redux store. Not sure if its working as intended or not.

[alexreardon]

It looks like each DragDropContext component is creating a separate redux store. Not sure if its working as intended or not.

That is intended. They are isolated 'applications'

I can confirm that we only make one store per <DragDropContext>

I found the issue: the redux dev tools can see stores from other browser tabs. If you open a new browser, open our examples and look at the dev tools you will find just one instance

🚀

[Jsalvat]

@alexreardon It's not fixed. And no, it's not the browser thing. react-beautiful-dnd creates another store with :

phase:"IDLE" completed:null shouldFlush:false

Don't know yet if it's only dnd issue or it involves material-table too.

It seems that is draggable thing from dnd. But I read that this is intended so maybe material-table is using some draggable things under the hood.

[VovaSv]

@alexreardon It's not fixed. And no, it's not the browser thing. react-beautiful-dnd creates another store with :

phase:"IDLE" completed:null shouldFlush:false

Don't know yet if it's only dnd issue or it involves material-table too.

It seems that is draggable thing from dnd. But I read that this is intended so maybe material-table is using some draggable things under the hood.

Do you have solution for this issue ?

[VovaSv]

@alexreardon We have the same issue... DragDropContext create a new store instance. Any solution for this?

"react-beautiful-dnd": "^12.2.0",

[b-zurg]

Can confirm seeing this as well.

[coreypmurphy]

Also confirming I see two "React App" store instances in my dev tools. React: 16.12.0 react-beautiful-dnd: 13.0.0

[LoicHa]

Same here , packages :

[leoschwarz]

I think the issue is already fixed in master https://github.com/atlassian/react-beautiful-dnd/commit/dab15a46f43752f14af76e95ee6b8ec68c8ef3bc , i.e. it will still create multiple redux stores but should correctly show up in the redux dev tools so it can be separated from the (api consumer) application.

[b-zurg]

Can the label "unconfirmed bug" be removed from this issue? I think we have enough confirmation to move it out of that category.

I also am not sure if adding a name to the store will fix the devtools issue, but perhaps it will! I guess we have to wait for a new release.

[aleksandr-leontev]

Does somebody know when this fix will be released to the npm registry?

[dev-perry]

Experiencing the same issue. There's only one component in my app with drag and drop. Every time the component mounts on its respective route (react-router-dom) two additional store instances get created.

[sfonua10]

I have "react-beautiful-dnd": "^13.0.0". Does that work with "react-redux": "^7.1.3",?

[EdmundsEcho]

Thank you for the ongoing support of this wonderful drag and drop capacity for react.

I came upon this issue trying to figure out how to disable the redux devtools for the react-beautiful dnd (RBD) store. As of now, the RBD store instance will "take-over" the dev tool. When I go to select an instance, there is a long list of RBD versions only; bizarre because using another library with my project (e.g., xstate), I can select between stores. So, at some level, this is unique to RBD.

Is there a way to toggle the use of the devtool for RBD? The idea comes from what xstate enables.

Otherwise, to the degree we can keep an eye on this issue to ensure a fix at some point would be helpful.

versions: redux DevTools: 2.17.1 react: 17.0.1 react-redux: 7.2.0 redux": 4.0.4

[orszaczky]

can we add a config parameter to disable redux dev tools for the react-beautiful-dnd store? it has no practical use, just pollutes my dev tools. if needed we should be able to turn it on, but by default i'm quite sure it should be turned off...

[OmarOmeiri]

Yes, the issue persists. Every time a component that mounts a <DragDropContext/> it creates two new redux stores and if the component unmounts, they persist. If I mount and unmount the component 5 times, I end up with 10 redux stores and they never go away until I reload.

[einarq]

Have you considered switching to plain context and useReducer for this? I would imagine you are not using any middlewares. Or is that not performant enough perhaps?

[poacher2k]

You can use the following to remove RBD instances in redux dev tools:

if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
    const ignoredInstances = ['react-beautiful-dnd'];
    if (
        !window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE_OVERRIDDEN__ &&
        typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === 'function'
    ) {
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__original__ =
            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE_OVERRIDDEN__ = true;

        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = function (opts) {
            const name = opts?.name;

            if (typeof name !== 'string' || ignoredInstances.includes(name)) {
                // // eslint-disable-next-line @typescript-eslint/no-empty-function
                return (a) => a;
            }

            return window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__original__(opts);
        };
    }
}