javascript - 如何解决与 Provider 我的商店链接并将数据传递到 Redux-React 应用程序中的组件的问题？

Question

我收到此错误:

Uncaught Error: Could not find "store" in either the context or props of "Connect(WebShop)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(WebShop)".

尽管我已将组件包装在 <Provider> 中标签并将其链接到我的商店。这是我的app.js :

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import {Provider} from 'react-redux';
import store from '../store';

import App from 'views/App';
import Home from 'views/Home';
import Webshop from 'views/webshop';
import Cart from 'views/webcart';



ReactDOM.render(
    <Router history={ hashHistory }>
        <Provider store={store}>
            <Route path='/' component={ App }>
                <IndexRoute component={ Home } />
                <Route path='Webshop' component={ Webshop } />
                <Route path='Cart' component={ Cart } />
            </Route>
        </Provider> 
    </Router>,
    document.getElementById('app') // eslint-disable-line
);

我的store.js是:

import { createStore, applyMiddleware } from 'redux';
import  reducer  from './reducers';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';


var initialState = {
  cart:"medium",
  data: [],
  url: "/api/comments",
  pollInterval: 2000
}

const store = createStore(
  reducer,
  applyMiddleware(
    createLogger(),
    thunkMiddleware
  )
);
export default store; 

我正在使用connect在我的webshop.js我在哪里使用:

const mapDispatchToProps = (dispatch) => {
    return {
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
    }
}

export default connect(null, mapDispatchToProps)(WebShop);

如果需要更多代码来找到解决方案，请告诉我。现在，我不确定这个错误是否来自 webshop.js文件或组件和商店之间的链接。为什么我会收到此错误以及如何修复它？

Answer 1

替换路由器和提供商的顺序。

ReactDOM.render(
    <Provider store={store}>
        <Router history={ hashHistory }>
            <Route path='/' component={ App }>
                <IndexRoute component={ Home } />
                <Route path='Webshop' component={ Webshop } />
                <Route path='Cart' component={ Cart } />
            </Route>
        </Router>,
    </Provider> 
    document.getElementById('app') // eslint-disable-line
);