React-dnd: Utilisation de redux connect et react-dnd

Oui, vous pouvez le faire comme ceci :

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

N'hésitez pas à ré-ouvrir :).

ah je vais essayer comme ça aussi. L'utilisation de flow serait-elle également une autre méthode acceptable ?

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

‎Oui, ça marche aussi !

Il semble que cela ne fonctionne pas pour le back end tactile...
J'ai essayé
App = DragDropContext(TouchBackend({ enableMouseEvents: true }))(App);
exporter la connexion par défaut (mapStateToProps, mapDispatchToProps) (App);
Je ne sais pas si je dois poster ce problème ici. Merci.

@longmfe comment importez-vous App ?

@jnrepo Merci pour la réponse.
je viens de l'importer
import App from ../../somepath/App.js
dois-je ajouter quelque chose lorsque je l'utilise?
BTW, je crée une application comme celle-ci
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);
Merci beaucoup. Bonne journée.

J'ai un problème pour envelopper mon composant racine avec le DragDropContext. Dans la console j'obtiens :
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 rendu method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Des indices sur ce qui pourrait causer ce problème? Je ne pense pas inclure plusieurs copies de React. Cela fonctionnait parfaitement avant d'envelopper le composant racine avec DragDropContext. Merci!

J'ai root.js configuré comme :
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);

Et App.js comme :
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;

La console React dispose ainsi les composants...