1

我正在按照 Redux 教程创建 Todo 应用程序，并尝试应用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",
}
4

1 回答 1

0

以防万一它可以帮助任何人，我保持这个问题开放。所以我通过将组件与组件<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 不会包含在您的应用程序的大部分中。

于 2017-01-16T03:50:37.577 回答