I have a application structure that mostly mimics the redux real-world example but can't get past getting this error:
Uncaught Error: Invariant Violation: Could not find "store" in either the context or props of "Connect(Home)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Home)".
Here follows my application structure:
import { render, createFactory } from 'react'
import { Provider } from 'react-redux';
import router from './router/router'
import store from './flux/store'
window.onload = () => {
render(createFactory(Provider)({store: store},
() => router
), document.body)
};
import { _ } from 'factories'
import { Router, IndexRoute, Route } from 'react-router'
import history from 'history/lib/createBrowserHistory'
import Home from '../components/home/home'
let route = _(Route),
index = _(IndexRoute);
let router = _(Router)({history: history()},
route({path: 'home', component: Home})
);
export default router;
import React, { PropTypes } from 'react'
import { div } from 'factories'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux';
import * as users from '../../flux/actions/users'
class Home extends React.Component {
constructor() {
super();
this.state = {}
}
componentWillMount() {
console.log(this.props.users.user)
}
componentWillUnmount() {
}
render() {
return (
div({}, "Home")
)
}
}
export default connect(
state => {
return {
users: state.users
}
},
dispatch => bindActionCreators(users, dispatch)
)(Home)
This results in getting the above mentioned error. as you can see I am passing the store in the same manner as shown in the redux example.
The solution was found in redux troubleshooting docs. I needed to have my react-router return a function that created the actual router:
import { _ } from 'factories'
import { Router, IndexRoute, Route } from 'react-router'
import history from 'history/lib/createBrowserHistory'
import Home from '../components/home/home'
let route = _(Route),
index = _(IndexRoute);
const router = () =>
_(Router)({history: history()},
route({path: 'home', component: Home})
);
export default router;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With