Routes don't have access to store given in Provider Redux React
<p>I would like my components to mostly have access to the store via their props.</p>

<p>I believe the correct way to do this when using <code>redux</code> is by using <code>connect</code> on the <code>Provider</code></p>

<p>I have all of this set up, but still my <code>Components</code> do not have state as a <code>prop</code></p>

<p><strong>App.js</strong></p>

<p>I have added everything here for completeness as I believe I am stupid , I am sorry.</p>

<pre><code>import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as currentSexActionCreator from '../actions/currentSexActionCreator';

import { browserHistory } from 'react-router'

class App extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(nextValue) {
        browserHistory.push(`/${nextValue}`)
    }

    render() {
        return (
            &lt;div&gt;
                {this.props.children}
            &lt;/div&gt;
        )
    }
}

App.propTypes = {
    // Injected by React Router
    children: PropTypes.node
}

function mapStateToProps(state, ownProps) {
    return {
        errorMessage: state.errorMessage,
        inputValue: ownProps.location.pathname.substring(1),
        'hutber':'hutber'
    }
}
function mapDispatchToProps(dispatch) {
    return {
        currentSexAction: bindActionCreators(currentSexActionCreator, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
</code></pre>

<p><strong>A Component - That should have props</strong></p>

<pre><code>class Sex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            participants: 1
        }
    }

    onSetParticipants = (data) =&gt; {
        store.dispatch (currentSex.setParticipants(data.valueText)); //the incorrect way to dispatch things, store is referencing the store
    }

    render() {
        console.info(this.props);
        return (
            &lt;div&gt;
                ....
                something here
                ....
            &lt;/div&gt;
        )
    }
}    

export default Sex;
</code></pre>

<p>*The provider**</p>

<pre><code>export default class Root extends Component {
  render() {
    const { store, history } = this.props;
    return (
      &lt;Provider store={store}&gt;
          &lt;Router history={history}&gt;
            &lt;Route path="/" component={App}&gt;
              &lt;IndexRoute component={Splash}/&gt;

              {/*No Signed In Page*/}
              &lt;Route path="/signin" component={SignIn} onEnter={authStates.blockForLoggedInUsers}/&gt;
              &lt;Route path="/signup" component={signUp} onEnter={authStates.blockForLoggedInUsers}/&gt;
              &lt;Route path="/signupconfirm" component={SignUpConfirm} onEnter={authStates.blockForLoggedInUsers}/&gt;

              {/*Login Required*/}
              &lt;Route path="/home" component={Home} onEnter={authStates.requireLogin}/&gt;
              &lt;Route path="/selection" component={Selection} onEnter={authStates.requireLogin}/&gt;

              {/*Sex Selection*/}
              &lt;route path="/desire" component={Desire} onEnter={authStates.requireLogin}/&gt;
              &lt;route path="/desire/saved" component={DesireSaved} onEnter={authStates.requireLogin}/&gt;
              &lt;route path="/masturbation" component={Masturbation} onEnter={authStates.requireLogin}/&gt;
              &lt;route path="/masturbation/saved" component={MasturbationSaved} onEnter={authStates.requireLogin}/&gt;
              &lt;route path="/sex" component={Sex} onEnter={authStates.requireLogin}/&gt;
              &lt;route path="/sex/saved" component={SexSaved} onEnter={authStates.requireLogin}/&gt;

            &lt;/Route&gt;
          &lt;/Router&gt;
          {/*&lt;DevTools /&gt;*/}
      &lt;/Provider&gt;
    )
  }
}
</code></pre>

<p>I am unsure if you need more information, but basically inside my component <code>console.info(this.props.store)</code> is <code>undefined</code></p>

<p>Maybe I am not thinking about it correctly?</p>