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实现完全是从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不会包含在您的应用程序的大部分内容。< / p>

与React Router一起嵌入到Provider中时，Redux Dev Tools失败

1 个答案: