The instance of redux is in the react context, so you can simply access it as:

class Foo extends React.Component {
  static contextTypes = {
    redux: React.PropTypes.object
  }

  componentDidMount () {
    this.context.redux.getState()
  }
}

You might want to look at some of the examples.

Thanks for the quick answer!

I think I saw this in one of the many examples about redux but since I didn't found it the the redux documentation I felt that this was more a hack that the actual good way to go.

Just to make sure I understand correctly, is it the Provider that make the redux instance accessible through react context?

Correct, the instance of redux is put into context in the Provider.

Thanks!

Is this applicable in v1.0.0-rc? I got undefined in context.redux. :(

@mewben

It's called store in 1.0 RC. Use this.context.store.
That said, context is a private API and is not supposed to be used directly.

(@emmenko Better not to suggest this to people :-)

Am I going all the wrong way about this and shouldn't I be trying to read from redux store to initiate data fetching from componentDidMount (I was doing so with flummox but maybe it's different with redux)?

Indeed, you're going a slightly wrong way.
There are two better solutions than reading from context directly.

Alternative 1: Use connect decorator instead of Connector.

We're probably going to remove Connector anyway in favor of a more powerful connect-centric API.

The reason you should use connect on your container component is that then you can access this.props.list and this.props.dispatch right from it instead of trying to read the state from a Redux store instance.

Something like:

import HomePage from './home-page.jsx';
import  * as HomeActions from './home-actions.js';
import { bindActionCreators } from 'redux';
import { connect } from 'redux/react';

function select(state) {
  return { list: state.home.list };
}

@connect(select)
export default class HomePageContainer extends React.Component {
  static fetchData(dispatch) {
    var homeActions = bindActionCreators(HomeActions, dispatch);
    return Promise.all([
      homeActions.loadList()
    ]);
  }

  componentDidMount() {
    if (!this.props.list) {
      this.constructor.fetchData(this.props.dispatch);
    }
  }

  render() {
    return <HomePage list={this.props.list} />;
  }
}

or, if you don't want to use decorator syntax,

import HomePage from './home-page.jsx';
import  * as HomeActions from './home-actions.js';
import { bindActionCreators } from 'redux';
import { connect } from 'redux/react';

function select(state) {
  return { list: state.home.list };
}

class HomePageContainer extends React.Component {
  static fetchData(dispatch) {
    var homeActions = bindActionCreators(HomeActions, dispatch);
    return Promise.all([
      homeActions.loadList()
    ]);
  }

  componentDidMount() {
    if (!this.props.list) {
      this.constructor.fetchData(this.props.dispatch);
    }
  }

  render() {
    return <HomePage list={this.props.list} />;
  }
}

export default connect(select)(HomePageContainer);

One Step Further: Smarter action creators + middleware

You can use redux-thunk middleware (it used to be included with 0.12, but in 1.0RC it's a separate package) to write “smarter” action creators that can check the current state and exit early.

For example:

// HomeActions.js

export function loadList() {
  // I don't know how you wrote it—maybe using redux-promise or something
}

export function loadListIfNeeded() {
  // This “return a function” form is supported thanks to redux-thunk
  return (dispatch, getState) => {
    if (getState().home.list) {
      return; // Exit early!
    }

    return dispatch(loadList()); // OK, do that loady thing!
  };
}

Now you can dispatch loadListIfNeeded() and avoid a check inside componentDidMount.

@gaearon thanks a lot for your insights!

Regarding the alternative 1

I actually started using the connect decorator but I had to go back to the Connector instead because I need to access to a params props (written by react-router) to extract the correct data from redux state.

For example:

import HomePage from './home-page.jsx';
import  * as HomeActions from './home-actions.js';
import { bindActionCreators } from 'redux';
import { Connector } from 'redux/react';

function select(state) {
  return { list: state.home.list[this.props.params.listID] };
}

// ...

  render() {
    return (
      <Connector select={select.bind(this)}>
        { ({ list, dispatch }) => <HomePage list={ list } /> }
      </Connector>
    );
  }
}

Is it possible to achieve similar extraction of props using the connect decorator? Isn't the decorator only limited to access class variables and methods (instead of instance variables and methods)?

And I see that you're using this.props.dispatch in componentDidMount but don't I need to access redux from context to get this dispatch method?

Regarding the alternative 2

I am using a promise middleware and I imagine that I could call the thunk middleware before it to achieve what you suggest. I really like the idea of avoiding the test in componentDidMount and I guess I could pass props to the action if I need to take a decision that depends on props. Am I correct?

Again, thanks for the time you took to explain and thanks for redux! :)

Is it possible to achieve similar extraction of props using the connect decorator? Isn't the decorator only limited to access class variables and methods (instead of instance variables and methods)?

With connect decorator, you'll get the instance's props as the second parameter to your select function.

Thanks @gaearon. I chose not to use connect since I'm only after an Action and not load any store like this:

const actions = bindActionCreators(AppActions, this.context.store.dispatch);
actions.login(credentials);

or maybe you have a more beautiful approach?

@mewben

Just noting that you don't have to use bindActionCreators if you don't pass the result object down.
You can just call dispatch directly:

this.context.store.dispatch(actions.login(credentials))

Ahh I see.. Thank you very much.. :)

@gaearon

Thanks, I didn't knew about the connect second parameter. I am still wondering how you get that dispatch you're using in this.constructor.fetchData(this.props.dispatch);. Do I have to add it in a parent container at some point, extracting it from context.redux?

@happypoulp That's what @connect decorator injects into your component.

Thanks a lot!

Also connect is used to subscribe your component to changes.

But as @gaearon mentioned, the new upcoming connect API will be more powerful.