React-redux: Store not available in props/context of components rendered using react-router

Created on 22 Aug 2016  路  7Comments  路  Source: reduxjs/react-redux

What I am rendering:

<Provider store={store}>
   <Router history={hashHistory}>
        <Route path='/' component={App}>
            <IndexRoute component={HomePage} onEnter={_ensureLoggedIn}/>
            <Route path="login" component={ SessionForm }/>
        </Route>
    </Router>
</Provider>

when attempting a sign in I am getting 'Cannot read property 'dispatch' of undefined' when calling this.context.store.dispatch

I threw a debugger and store is not present on this.props or this.context (SessionForm component).

I thought I tried everything from all the documentation on this subject I could find, still no help though

Most helpful comment

Excellent thank you Tim! and apologies for totally missing that part of the readme, I believed this particular functionality worked independently from connect

All 7 comments

Are you attempting to access the <Provider> context directly? You should be @connecting your components and providing your action creators as bound functions to dispatch, which you can then access via props.

I would like to dispatch from the SessionForm component on a form submit event, was under the impression that provider allows for the store to be accessed by this.context.store

Yes, but that's removing a big benefit of having this library. You should use @connect instead like so: https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-todos-and-all-action-creators-addtodo-completetodo--as-actions

Understand the benefit of connect for presentational components however this component is just a log in form. It does not need to be connected to redux state. Just needs to call dispatch when submit is clicked. Is this still an appropriate use for connect?

You don't have to connect to state: https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-just-dispatch-and-dont-listen-to-store

Yeah, both mapState and mapDispatch are optional. Connected components can optionally subscribe to state updates or ignore state entirely, and specify what functions they want to use dispatch with or just receive dispatch as a prop. Fine either way.

Excellent thank you Tim! and apologies for totally missing that part of the readme, I believed this particular functionality worked independently from connect

Was this page helpful?
0 / 5 - 0 ratings