React-beautiful-dnd: Usage with existing redux store and react-redux < v5 will break plugin

[jtavarez]

Bug / Docs

At work we learned that if you use this plugin with a project already using a separate Redux store and react-redux, which seems to be a common use case, it will break unless the react-redux version is 5.0.5 or greater. You should either make it compatible with older versions, or the better and easier option is to just be explicit in the docs about this requirement? In case there are other teams using older dependencies that want to try this awesome plugin.

In this scenario plugin breaks because it is passed the separate external store instead of its own instance.

Browser version

Latest chrome

Demo

This is your same demo with simple store and <Provider /> component added to mimic separate store. Only difference below is version of react-redux

5.0.6 : https://www.webpackbin.com/bins/-KxY-rO_jGLZsQnebWoL
4.4.8 : https://www.webpackbin.com/bins/-KxY1MdbafoDIUfkMD3D

As an aside, we were upgrading from webpack v1 (!) to 3, when this issue started. For whatever reason it wasn't appearing when we reverted to v1, so we spent over a day trying to figure out what was wrong with our build settings. Still have no idea about that.

[alexreardon]

This seems very unusual. Our redux lib is a private dependency. The only point of sharing is the context usage. However, we namespace our redux connect usage so there should be no clashes with other redux stores. Can you please create a webpack bin that shows this issue? I cannot think why a private dependency could behave like this.

[alexreardon]

Oh sorry, you have created a bin. I will try to take a look in a few days when I return

[lukebatchelor]

Just FYI, if webpackbin behaves similarly to codesandbox, any nested dep that matches a root one will actually share an instance, regardless of if the root one satisfies the requested dependency.

Might want to export the example into a creat e react app just in case.

[alexreardon]

I feel like this one is a build issue: combining dependencies that shouldn’t be. I expect that if the lib dep is not touched and you use any other redux dep yourself then things should be fine. That is my strong suspicion without looking into it

[alexreardon]

It looks like the line that is breaking is not within react-beautiful-dnd, but rather is on the line:

let store = createStore(appReducer)

Can you please provide some more information about this issue @jtavarez ?

[alexreardon]

This all seems very strange and I think it is a build issue of rolling up mismatched dependencies. However, the example does not show that and breaks on a piece of code that is not related to this library...

[alexreardon]

Closed by mistake - but I think it will be closed soon unless new information comes to light

[jtavarez]

I will look into it some more when I have time.

[alexreardon]

I'll close this issue for now as I strongly suspect the issue is a build one. If you find that it is not @jtavarez we can reopen this issue

[gandazgul]

I have this issue too, I dont see how this is a build problem,<Provider> is wrapping the entire application so the store prop referenced in any child will be THE redux store, I'm getting an error within droppable because your reducer was never added to the store. If you exposed your reducer then I could add it to my store and everything just just work. I don't know how to support applications without redux.

I can't use this unfortunately. Very nice library otherwise.

[alexreardon]

@gandazgul if you could please create a reproducible example that would be great.

We use a private context channel for our store so there should be no conflicts with your own usages of Provider.

Given we are using a private channel my guess on what is going on is that if you are using an old version of react-redux that did not support private channels, and our react-redux is de-duped (which should not happen) then you might get this issue. Until I see an example it is hard to move forward on this one

[aaronromeo]

I don't have an example to share, but (for what it's worth) I also ran into a problem on react-redux v4.4.5 with state.dimension being pulled from my app's state rather than the react-beautiful-dnd state. The problem was resolved with a version bump of react-redux v5.0.6.

[hattmarris]

I can confirm we ran into the same issue. The problem was also resolved bumping react-redux to v5.0.6