Can't get store from context

My top level component is like so:

ReactDOM.render(
    <div>
        <Provider store={store}>
            <App />
        </Provider>
    </div>,
    document.getElementById('app')
);

And my App component is like so:

@connect(state => state)
export default class App extends React.Component {
    render() {
        return (
            <div className={cx('container')}>
                <Workspace />
                <Blotter />
            </div>
        );
    }
}

I’m not using React Router, and I’ve ensured that there is only one React instance loaded.

If I break at the top of App.render, this.context has no store on it. However, this._reactInternalInstance._context does have the store attached. Obviously I can grab this, but I’m guessing I shouldn’t really use that one.

Why is there no store on this.context? I want to subscribe to certain state changes.

Thanks.

[gaearon]

There are two possible approaches here.

Use connect() and don’t worry about the context

This is the approach we suggest. Use connect(), let it subscribe to the store, and don’t worry about the React context API. There are limitations: indeed, store itself is not passed down as a prop, but subscribing to it inside a connect()ed component is an anti-pattern anyway. Let connect() take care of subscriptions. If you want to cause a side effect when store state changes, do this in componentWillReceiveProps of the connect()ed component.

Specify contextTypes for store and access context directly

If you really want to grab store from context yourself (my advice: don’t do this unless you have a very good reason!) you need to specify contextTypes. Context is opt-in in React, and you won’t receive this.context if you don’t specify contextTypes. My free Egghead lesson on implementing <Provider> with context covers that.

[marcuswhit]

@awestroke was correct, I just needed to correctly specify contextTypes in my component, and the store was then added as expected:

App.contextTypes = { store: React.PropTypes.object };