Redux Dev Tools 在与 React Router 一起嵌入 Provider 时失败

Question

我正在按照创建Todo应用程序的Redux教程进行操作，我尝试应用Redux Dev Tools并尝试将其嵌入到我的Provider下React Router但是我收到此错误：

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Provider`, expected a single ReactElement.
    in Provider (created by Root)
    in Root

以下是我尝试嵌入它的方式：

import { createStore } from 'redux'
import todos from './reducers'
import DevTools from './components/DevTools'
const store = createStore(todos, {}, DevTools.instrument())
const Root = ({ store }) => (
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/(:filter)" component={App} />
        </Router>
        <DevTools /> <!-- If I remove DevTools everything is fine -->
    </Provider>
)
Root.propTypes = {
    store: PropTypes.object.isRequired
}
render(<Root store={store} />, document.getElementById('app'))

我的DevTools实现完全是从文档中抓取的 这是我当前的依赖项：

{
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.1",
    "redux": "^3.6.0",
    "redux-devtools": "^3.3.2",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.2.0",
}

Answer 1

以防万一它对任何人有帮助，我保持这个问题开放。因此，我通过将<DevTools />与<Provider />组件相邻并在store中传递来解决此问题。

const Root = ({ store }) => (
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/(:filter)" component={App} />
        </Router>
    </Provider>
    {!isProduction && <DevTools store={store} /> }
)

我还指出了代码库是否用于生产，如果不是，则显示<DevTools/>组件，因此当您构建应用程序时，Redux DevTools 将不会包含在您的应用程序的大部分中。