I'm using React + Redux + Express. Whenever I reload my localhost/courses
I got an error not find 'store'. But if I go from localhost -> click to nav course
, everything is working fine. How can I fix that?
Error
Invariant Violation: Could not find "store" in either the context or props of "Connect(Course)". Either wrap the root component in a Provider, or explicitly pass "store" as a prop to "Connect(Course)".
store.js
const middleware = applyMiddleware(promise(), thunk, logger());
export default createStore(reducer, middleware);
App.js
window.onload = () => {
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
</Provider>
, document.getElementById('main'));
};
routes.js
const routes = (
<Route path='/' component={Layout}>
<IndexRoute component={Home}/>
<Route path='courses' data={data} component={Course}>
</Route>
);
export default routes;
Course.js
class Course extends React.Component {
static contextTypes = {
router: React.PropTypes.object,
};
componentWillMount() {
this.props.dispatch(fetchVocabulary());
};
render() {
console.log(this.props.words);
return (
<div>
...
</div>
);
};
}
export default connect((store) => {
return {
words: store.vocabulary.words
};
})(Course);
package.json
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.1.0",