Question: We have recently switched over to React + Flux from Angular to build a rather complex business application.

Taking the approach of having one container component that passes all state as properties down the component tree isn't a practical way to develop the app for us as the app makes use of large page-like modals. Enough state does get passed down to the modals for them to load their data into their stores.

The problem I have is I need to get some initial state (passed down as props) into the modal component's store. In [this post](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html) the good guys over at Facebook say it's ok to use props for initial state when synchronization is not the goal. 

This is how I get the initial state into my store currently:

```
var ABC = React.createClass({
  ...  
  getInitialState: function() {
    return ABCStore.getInitialABCState(this.props.initialA);
  },
  ...

var ABCStore = Reflux.createStore({
  ...
  init: function() {
    _state = {
      a: null,
      b: 'B init',
      c: 'C init'
    };
  },

  getInitialABCState: function(initialA) {
    _state.a = initialA;
    return _state;
  },

  getABCState: function() {
    return _state;
  }
  ...

```

I am unsure what the best practice is to do this, or whether this is a Flux anti-pattern?

Answer: 
It feels wrong to me that you are using `getInitialState()` to change the state of your store. You should at least be doing that in [`componentWillMount`](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount).

I would trigger an action in `componentWillMount` and have the store handler update the internal state of the store (this should always be the case in flux). Then your component's change handler for the store can consume whatever data that you are currently calling your "initial state"
Like other posters have said, the best thing to do is to trigger an action in `componentWillMount`. In ES6, this is usually done with a `constructor`.

Below is an example on how to do this with ES6:

(note that `AuthorActions.initAuthors()` is dependent on implementation, this is just an example. This could get initial state from database. Most importantly though, this action should dispatch the payload with the initial state to the dispatcher)

```
var _authors = [];
var AuthorStoreInstance;

class AuthorStore extends EventEmitter {

    constructor(props) {
        super(props);
    }

    init() {
        AuthorActions.initAuthors();
        this.emitChange();
    }

    addChangeListener(cb) {
        this.on(CHANGE_EVENT, cb);
    }

    removeChangeListener(cb) {
        this.removeListener(CHANGE_EVENT, cb);
    }

    emitChange() {
        this.emit(CHANGE_EVENT);
    }

    getAllAuthors() {
        return _authors;
    }

    addAuthor(author) {
        _authors.push(author);
        this.emitChange();
    }

    setAuthors(authors) {
        _authors = authors;
    }

};

AuthorStoreInstance = new AuthorStore();

Dispatcher.register((action) => {
    switch(action.actionType) {
        case ActionTypes.CREATE_AUTHOR:
            AuthorStoreInstance.addAuthor(action.author);
            break;
        case ActionTypes.INITIALIZE:
            AuthorStoreInstance.setAuthors(action.initialData.authors);
            break;

        default:
            //do nothing
    }
});

AuthorStoreInstance.init();

export default AuthorStoreInstance;

```

Notice how the init function is not a part of the constructor. This is because when the authorStore is constructed, the callback for the `AuthorActions.initAuthors` has not been registered with the dispatcher.

Initialization should happen after callbacks have been registered with the dispatcher.

edit: For clarity, `initAuthors` could look something like this:

```
initAuthors() {
    var authors = AuthorAPI.getAllAuthors();

    Dispatcher.dispatch({
        actionType: ActionTypes.INITIALIZE,
        initialData: {
            authors: authors
        }
    });
}

```