Access react component context in mapStateToProps()

Hi,

I know that binding the component context to props as been discussed and is not relevant yet.

What about reading the component own context. I need something like: connect((appState, ownProps, ownContext) => { ... })

Is that possible?

Using react-router, I need to access some url params through inner components. I want to pass them through contextType. Then those url params are used in mapStateToProps() function to target the right stores on appState.

[adriancooney]

You seem pretty set on your decision, Dan, but I thought I’d give you some perspective my situation where this feature might be useful for consideration.

Each of my <Route /> components are connect’d so if they’re linked directly, they know what state to load. For example:

<Route path=":username/:repo" component={Repo}>
    <Route path="issues" component={Issues} />
</Route>

The Repo connected component loads the data it needs to display and selects it from the state in it’s mapStateToProps. Say, for instance, it selects the repoOwner and repoInfo from the state. The child component Issues loads the data it needs to display and selects it from the state. It also needs the repoOwner and repoInfo state too so instead of performing the selection again (which is quite complicated), it’s passed down via context. The problem arises when the Issues component needs information from repoOwner in it’s mapStateToProps, which isn’t available because it’s in the context.

My hacky solution is to just create a wrapper component that passes the context as a prop but it feels dirty and I end up with a lot of useless components filling up the tree:

class IssuesWrapper extends Component {
    static contextTypes = {
        repoOwner: React.PropTypes.object
    }

    render() {
        return <Issues repoOwner={this.context.repoOwner} />
    }
}

<Route path=":username/:repo" component={Repo}>
    <Route path="issues" component={IssuesWrapper} />
</Route>

I feel as though a third argument to mapStateToProps, like React’s lifecycle methods, with the context could be pretty useful so I could access repoOwner directly instead of creating the wrapper. This may be hard to implement, however, given the magic react-redux does with the function.length on the mapStateToProps function (i.e. if you want context, you have to suffer the performance impact from including props argument) so I understand it’s a tough decision.

[jimbolla]

Until the day comes that React has a fully blessed context API, adding support for it is a maintenance liability for React Redux.