Join's callback gets only the first emission

[apreg]

Here is what I'm trying to achieve: I have a LoginScreen component which triggers a loginUser action.

login: function (e) {
       e.preventDefault();
       this.setState({ showModal: true });
       this.joinConcat(UserStore, SettingsStore, this.onLoginCompleted);
       UserActions.loginUser(this.state.user, this.state.password);
    },

The loginUser makes an async ajax request to the server. When it completes then calls the onLoginUserCompleted callbacks in UserStore and SettingStore. After these two stores set their states based on the response they trigger. Then the onLoginCompleted in LoginScreen gets called but only with the first publisher's (UserStore in this case) emission then it transitions to the next page. Is it a bug or did I misunderstand something? Is this a good way to handle this situation? I mean shall I trigger a second event from the UserStore to which the SettingsStore could listen? The main point is I need to wait with the transition to the next page till the SettingsStore is initialized.

[spoike]

Two suggestions:

• Shouldn't you use joinTrailing instead?
• You could rewrite to use asynchronous actions instead:

// Setup actions
var UserActions = Reflux.createActions({
  loginUser: {async: true}, // ...
});

loginUser.listen((user, password) => {
  api.login(user, password)
    .then((userInfo, settings) => this.completed(userInfo, settings))
    .catch((err) => this.failed(err));
});

// Your UserStore can now emit after onLoginUser.completed to push out userinfo
// Your SettingsStore can now emit after onLoginUser.completed to push out userinfo

Hope this helps!