Im new to Redux. Trying to setup it within a current project.
import thunk from 'redux-thunk'
import * as reducers from './store/reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(combineReducers(reducers), composeWithDevTools(
applyMiddleware(thunk)
))
Have a routing scheme with Provider in place:
<Router history={browserHistory}>
<Route path='/login' component={Login} />
<Provider store={store}>
<Route path='/' component={App} onEnter={auth}>
<Route path='/token' component={Token} />
<Route path='/engagement' component={Engagement} />
<Route path='/clients' component={Clients} />
</Route>
</Provider>
</Router>
And I have a basic container component in <Clients /> component:
class Clients extends Component {
render () {
return (
<div className='any-css' >
<Row>
<ClientsSubMenuContainer someId={13} />
</Row>
</div>
)
}
}
that I'm trying to connect with store:
class ClientsSubMenuContainer extends Component {
render () {
return <ClientsSubMenu {...this.props} />
}
}
// which props do we want to inject, given the global store state?
function mapStateToProps (state) {
return {
}
}
export default connect(mapStateToProps)(ClientsSubMenuContainer)
and all I get currently is a warning:
Uncaught Error: Could not find "store" in either the context or props of "Connect(ClientsSubMenuContainer)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(ClientsSubMenuContainer)".
How to setup this correctly so all components (excluding or including login) will have access to store and all redux features?
Update 1 day later
I just found the core of the problem, thanks to the community.
There was another piece of code in index.js that was added ruthlesly by one of the juniors against any gitFlow :) I didn't noticed it because was totally sure that master branch is save from any changes.
This piece of code looked like that:
let router = (
<Router history={browserHistory} onUpdate={onUpdate}>
{Routes}
</Router>
)
render(Routes, document.getElementById('app'))
so the final result was:
<Router history={browserHistory} onUpdate={onUpdate}>
<Provider store={store}>
<Router history={browserHistory}>
<Route path='/login' component={Login} />
<Route path='/' component={App} onEnter={auth}>
<Route path='/token' component={Token} />
<Route path='/engagement' component={Engagement} />
<Route path='/clients' component={Clients} />
</Route>
</Router>
</Provider>
</Router>
and router worked just fine. The only hint was redux warning, that disappeared after removing wrapping <Router />
createStore? I'm guessing that could be the issue.Routerinside theProvider. in routes