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

Question

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

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 实现完全是从 documentation 中获取的，这是我当前的依赖项：

{
    "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 将不会包含在您的应用程序中。

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

Redux Dev Tools failing when embedding inside Provider alongside React Router

redux

redux-devtools

react-redux