React-dnd: Usage of redux connect and react-dnd

Yes, you can do it like this:

import { connect } from "react-redux";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";

class App extends Component {
  ...
}

App = DragDropContext(HTML5Backend)(App);
export default connect(mapStateToProps)(App);

Feel free to re-open :).

ah I will try that way as well. Would using flow also be another acceptable method as well?

import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import flow from 'lodash/flow'

export default flow(
  connect(selector),
  DragDropContext(HTML5Backend)
)(ExperienceEditor);

‎Yes, that would also work!

It seems that it doesn't work for touch back end...
I tried
App = DragDropContext(TouchBackend({ enableMouseEvents: true }))(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);
I am not sure if I should post this issue here. Thanks.

@longmfe how are you importing App?

@jnrepo Thanks for reply.
I just import it
import App from ../../somepath/App.js
should I add something when I using it?
BTW, I create App like this
import {connect} from react-redux
import {bindActionsCreators} from redux
class App extends Component {
}
App = DragDropContext(TouchBackend({ enableMouseEvents: true }))(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);
Thanks a lot. Have a nice day.

I am having an issue wrapping my root component with the DragDropContext. In the console I get:
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Any clues as to what might be causing this issue? I do not think I am including multiple copies of React. This was working perfectly before wrapping the root component with DragDropContext. Thanks!

I have root.js configured as:
import { Component } from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

class Root extends Component {
render() {
return <div>
{React.cloneElement(this.props.children, this.props)}
</div>;
}
}

export default DragDropContext(HTML5Backend)(Root);

And App.js as:
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Root from './root';

function mapStateToProps(state) {
return {
...
}
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({
...
}, dispatch)
}

const App = connect(mapStateToProps, mapDispatchToProps)(Root);

export default App;

The React console lays out the components in this way...