React-dnd: Использование redux connect и react-dnd

Да, это можно сделать так:

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);

Смело открывайте заново :).

ах, я тоже попробую. Будет ли использование flow еще одним приемлемым методом?

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);

Да, это тоже сработает!

Похоже, что для touch back end не работает ...
Я пытался
Приложение = DragDropContext (TouchBackend ({enableMouseEvents: true})) (Приложение);
экспорт подключения по умолчанию (mapStateToProps, mapDispatchToProps) (приложение);
Я не уверен, стоит ли публиковать здесь эту проблему. Спасибо.

@longmfe как вы импортируете App ?

@jnrepo Спасибо за ответ.
Я просто импортирую это
import App from ../../somepath/App.js
я должен что-то добавить, когда использую это?
Кстати, я создаю такое приложение
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);
Большое спасибо. Хорошего дня.

У меня проблема с переносом моего корневого компонента в DragDropContext. В консоли получаю:
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's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Есть какие-нибудь подсказки относительно того, что может вызвать эту проблему? Я не думаю, что включаю несколько копий React. Это отлично работало до того, как корневой компонент был заключен в DragDropContext. Спасибо!

У меня root.js настроен как:
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);

И App.js как:
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;

Консоль React раскладывает компоненты таким образом ...