react + redux + why dnd的应用程序在组装后不能工作，为什么？

Question

运行测试脚本时会发生错误

不变违反:在"Connect (DragD ropContext (App))“上下文中找不到"store”。或者将根组件封装在连接选项中，或者将自定义的DragDropContext提供程序传递给相应的(DragDropContext (App))。

尽管所有的东西都在一个未组装的项目中工作。据我所知，存在一些问题，因为根组件封装在两个hocs中--一个是氧化还原，另一个是dnd。

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

我试着先用dnd包装，然后用redaks包装--没有用，一切都是一样的。

Answer 1

您似乎将遗留装饰器API与顶级API混为一谈。

遗留装饰API

使用遗留装饰器，您可以按以下方式包装：

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

class YourApp {
  /* ... */
}

export default DragDropContext(HTML5Backend)(App)

查看有关遗产装饰程序API 在这里..。的文档

顶层API

对于顶级API，您可以使用：

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

查看有关顶级API 在这里..。的文档。