1
votes

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",
1

1 Answers

1
votes

Since you are using browserHistory , you need to use historyApiFallback

devServer: {
        historyApiFallback:true
    }

This uses connect-history-api-fallback to serve up index.html if the route doesn't match any other files and then all routes will be with respect to this file