Access store from context?

Hi, I just updated to 6.0.0 and have a question. I can’t really figure out from the docs how to access the store from context anymore.

My app is wrapped with <Provider store={store}>

Then in any component I could access it with

MyComponent.contextTypes = {
    store: PropTypes.object.isRequired
};

->

this.context.store

How do i achieve the same thing with 6.0.0?

[markerikson]

Note that contextTypes and contextType are not the same thing.

React defines legacy context using syntax like:

class MyComponent extends React.Component {}

MyComponent.contextTypes = {
    a : PropTypes.string,
    b : PropTypes.object
}

When the new context API was released, it originally could only be used via a render-props API:

<MyContext.Consumer>
{ (contextValue) => {
    // do stuff with the context value here
});
</MyContext.Consumer>

To help with the migration from old context to new context, the React team added a new way to access new context in 16.6 called contextType:

class MyClass extends React.Component {
  static contextType = MyContext;
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
}

So, you should be able to do:

class MyComponent extends React.Component {
    static contextType = ReactReduxContext;

    componentWillUnmount() {
        const storeState = this.context.store.getState();
        // do something with the store state here
    }
}

[timdorr]

If you want that, you can just make your own context:

// StoreContext.js
import React from 'react'

export const StoreContext = React.createContext()

export default StoreContext

// app.js

import StoreContext from './StoreContext'

const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    <StoreContext.Provider value={store}>
      <App />
    </StoreContext.Provider>
  </Provider>,
  root
)

The new API is really simple 👍