如何解決與供應商我的商店鏈接以及將數據傳遞到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; 

我在我使用的webshop.js中使用connect ：

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