I'm getting this error:
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)".
Even though I have wrapped my components in a <Provider>
tags and linked it to my store. This is my 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
);
My store.js
is:
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;
I'm using connect
in my webshop.js
where I use :
const mapDispatchToProps = (dispatch) => {
return {
onCartAdd: (cart) => {
dispatch(addCart(cart));
},
}
}
export default connect(null, mapDispatchToProps)(WebShop);
If more code is needed to find a solution let me know. Now, I'm not sure if this error is coming from the webshop.js
file or the linking between the components and the store. Why am I getting this error and how can I fix it?
Replace the order of router and provider.
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
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.