On React Flux, where I am supposed to populate the initial state of my Stores?

Question

I'm studying Flux and I think I understood the workflow:

View -> Action -> Dispatcher -> Store -> View

However, I didn't quite understand where am I supposed to populate the initial state of my Stores.

For instance, let's say that I'm editing a Contact. So I'd assume I'd have a ContactsStore. This is what I imagine would happen when I access the URL /contacts/edit/23:

1. Somehow my ContactsStore gets populated with the contact I'm editing, in this case, contact 23. The data would come from the server.
2. The EditContact view would receive a notification from the ContactsStore, so it would render itself in the initial state.
3. As I save the contact, the view would trigger the SaveContact action and the flow would go on.

Step (1) is not clear to me. Where is the ContactsStore expected to be populated with the initial state? Where do I call the server? Is it on the Store?

Thanks.

Answer 1

You need to have access to the action and the store in your EditContact component. In the componentDidMount handler you could fire an action which does the api request. On success it passes the contact to the dispatcher/store. As soon as the store receives the contact it fires an event on which the EditContact component has subscribed. In the corresponding handler the component sets the new state with the new contact. I'm sure there are other ways to do this, but that's how I would do it.