React-beautiful-dnd: Many Redux Instances

[oze4]

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

[oze4]

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.:(

[oze4]

@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?

[oze4]

@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

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",?