react + redux + react-dnd 上的应用程序在组装后不起作用，为什么？答案

【问题标题】：The application on react + redux + react-dnd does not work after assembly, why?react + redux + react-dnd 上的应用程序在组装后不起作用，为什么？
【发布时间】：2019-07-01 00:19:11
【问题描述】：

运行测试脚本时发生错误

不变违规：在“Connect (DragD) 的上下文中找不到“store” ropContext (App)) "。要么将根组件包装在一个，或将自定义的 React 上下文提供程序传递给连接选项中对应的 React 上下文 Consumer Connect (DragDropContext (App))。

尽管在未组装的项目中一切正常。据我了解，由于根组件被包裹在两个 hoc 中 - 一个是氧化还原，另一个是 dnd，因此存在一些问题。

ReactDOM.render(<DragDropContextProvider backend={HTML5Backend}>
                    <Provider store={store}>
                        <App />
                    </Provider>
                </DragDropContextProvider>, document.getElementById('root'));

我尝试先在 dnd 中包装，然后在 redaks 中包装 - 它没有帮助，一切都一样。

【问题讨论】：

标签： react-redux

【解决方案1】：

您似乎将旧版装饰器 API 与顶级 API 混为一谈

旧版装饰器 API

使用传统装饰器，您可以如下包装：

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

class YourApp {
  /* ... */
}

export default DragDropContext(HTML5Backend)(App)

查看有关 Legacy Decorator API here... 的文档

顶级 API

对于您使用的顶级 API：

import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
....
...
        <div className="App">
            <DndProvider backend={HTML5Backend}>
                <App />
            </DndProvider>
        </div>

查看有关顶级 API here...的文档

【讨论】：