@asyncConnect breaks getChildContext?

[Niklas Holmberg]

Hi,

So, I have some routes and one surrounding them.

<Route component={ApplicationContext}>
<Route path="start" component={StartHandler} />
...
</Route>

ApplicationContext sets upp some context for the rest of the app like this:

export default
class ApplicationContext extends React.Component {
    getChildContext() {
        var state = this.context.store.getState();

        var getEnv = function(name) {
            return state.env[name];
        };

        var getAsset = function(assetUrl) {
            return state.assets[assetUrl] || assetUrl;
        };

        return {
            location: this.props.location,
            getEnv: getEnv,
            getAsset: getAsset
        };
    }

    render() {
        return (
            <ApplicationComponent children={this.props.children} />
        );
    }
}

ApplicationContext.displayName = 'ApplicationContext';

ApplicationContext.propTypes = {
    location: React.PropTypes.object.isRequired
};

ApplicationContext.contextTypes = {
    store: React.PropTypes.object.isRequired
};

ApplicationContext.childContextTypes = {
    location: React.PropTypes.object,
    getEnv: React.PropTypes.func,
    getAsset: React.PropTypes.func
};

So far so good. Now I have some general data that I want to load regardless of what route you access. I thought the ApplicationContext could handle this so I added the following:

import {asyncConnect} from 'redux-async-connect';
import {isLoaded, load} from '/reducers/mydata';

@asyncConnect([{
    promise: ({store}) => {
        if (!isLoaded(store.getState().mydata)) {
            return store.dispatch(load());
        }
    }
}])
export default
class ApplicationContext extends React.Component {
...

Now I get
"TypeError: Cannot read property 'getState' of undefined"
For this line:
var state = this.context.store.getState();

Is this a bug or am I doing this wrong?

Thanks!

[Niklas Holmberg]

To be more specifik. I think it is ApplicationContext.contextTypes that breaks.

[Rodion]

@badtant , hi
so far i dont see how this issue can be related to redux-async-connect
Usually such context props is passed from provider in higher components, like react-redux provider does:
https://github.com/sars/appetini-front/blob/appetini/src/client.js#L29
https://github.com/sars/appetini-front/blob/appetini/src/helpers/rootComponent.js#L10

[Niklas Holmberg]

You're right. Closing this...
Thanks!

[Piotr Godek]

@badtant @sars But the same happens for me. contextTypes gets cleared as soon as I use the @asyncConnect decorator.

[Piotr Godek]

OK I suppose it was wrong usage of the decorator. How should @asyncConnect be used if I am not using connect as a decorator, but rather export default connect(mapStateToProps)(MyContainer) ?