0

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 />

3
  • Can you show your call to createStore? I'm guessing that could be the issue. Commented Jan 10, 2017 at 12:02
  • Sure, have to add this from the very beginning... Commented Jan 10, 2017 at 12:07
  • 1
    Try keeping Router inside the Provider. in routes Commented Jan 10, 2017 at 12:12

1 Answer 1

1

Can you try wrapping all component with provider.

<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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.