React+Reflux how should stores and components handle onChange key presses with ajax

Question

I would like some help wrapping my head round a react/reflux pattern that I have going on, and if its acceptable.

I have a form component which renders several form elements such as the example below. The form component is connected to a Reflux Store, where the data is located for the form elements.

exports.InputField = React.createClass({
  getInitialState: function(){
    return {
      value: this.props.initialValue
    }
  },

  onChange: function(e){
    this.setState({value: e.target.value});

    // this is being throttled.
    Actions.SomeAction(this.props.name, e.target.value);
  },

  render: function(){
    var value = this.state.value;
    return (
      <input type="text" value={value} onChange={this.onChange}/>
    )
  }
})

In the given example, the user types in the field, and this in turn will trigger an ajax request to save the data, usually responding with a status code of 200.

1. Should I be this.trigger'ing inside my store when this completes? This would cause setState on the form to be invoked on every debounced key press. Is that bad?

2. Am I allowed to fire events from the store, such as Actions.FieldUpdated and listen to that within the field component?

Theres a couple of examples of react/reflux examples of things being updated with submit buttons, but I cant find any examples of this with onChange.

Answer 1

1. If you don't trigger from your store when the data is updated on your server side, it means that the views are not notified in case of an error. It is hard to know if it is a good thing without knowing your use case. You shouldn't worry about calling setState too many times, this is the point of React. Calling setState means rendering only what has changed, so it is usually not costly. In your case it might just be a bit useless to call setState when you trigger as you called it just before when your input content is changing.

2. It is allowed for a store to dispatch an action. If you want your stores to be smart, it is sometimes needed. You can think about the case of making an API call, but you first have to dispatch an action to another store to get an authorization token for example. It is nice to avoid it but you sometimes don't have a choice.