Redux Dev Tools failing when embedding inside Provider alongside React Router

Question

I was following the Redux tutorials creating the Todo app and I tried applying Redux Dev Tools and tried embedding it under my Provider alongside React Router however I get this error:

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

Here is how I'm trying to embed it:

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

My DevTools implementation is just completely grabbed from the documentation Here's my current dependencies:

{
    "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",
}

JohnnyQ · Accepted Answer · 2017-01-23T01:52:25.407

Just in case it helps anyone, I'm keeping this question open. So I've solved this by putting the <DevTools /> adjacent with the <Provider /> component and passed in the store as well.

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

Also I indicated if the codebase is for production if not then show the <DevTools/> component, this is so when you build your application the Redux DevTools won't get included in the bulk of your app.

Redux Dev Tools failing when embedding inside Provider alongside React Router

1 Answers1