reactjs - Grasping the theory behind Flux in React -

i've been applying flux-like architecture react app, , wondering if app state meant kept in store(s) rather components. seems there scenarios might have components maintain own state.

for instance, below self-aware formelement. couldn't imagine writing flux-like architecture, dispatched store action. how store possibly keep track of different form elements, , parent form?

in short: acceptable have some components keep track of own state, while others use dispatch?

formelement = react.createclass({   displayname: 'formelement',    validations: {     email: /^[a-za-z0-9-._+]+@[a-za-z0-9-]+[.a-za-z0-9-]*\.[a-za-z]{2,}$/,     password: /.{6,}/   },    proptypes: {     id: react.proptypes.string.isrequired,     label: react.proptypes.string.isrequired,     type: react.proptypes.string,     required: react.proptypes.bool   },    getdefaultprops() {     return {       type: 'text',       required: false,       disabled: false     }   },    getinitialstate() {     return {       focused: false,       filled: false,       valid: true,       invalidmessage: ''     }   },    handlefocus(focusing) {     let valid = true, errmsg = '';     let inputval = react.finddomnode(this.refs.inputfield).value;      this.setstate({focused: focusing});      if (!focusing) {       // validations on blur       if (this.props.required && !this.state.filled) {         valid = false;         errmsg = this.props.label + ' required';       }        if (this.props.type === 'email' &&         this.state.filled && !this.validformat(inputval, 'email')) {         valid = false;         errmsg = 'invalid email address';       } else if (this.props.type === 'password' &&         this.state.filled && !this.validformat(inputval, 'password')) {         valid = false;         errmsg = 'password short';       }     }      this.setstate({valid, invalidmessage: errmsg}, function () {       // notify parent changed       //this.props.onaction(this);     });   },    handlechange({target}) {     this.setstate({       value: target.value,       filled: target.value.length > 0     });   },    validformat(str, type) {     return !!str.match(this.validations[type]);   },    render() {     let formelement;     const labelclasses = classnames({       'focused': this.state.focused || this.state.filled     });     const groupclasses = classnames({       'form-group': true,       'has-error': !this.state.valid     });      if (_.contains(['text', 'email', 'password'], this.props.type)) {       formelement = (         <div classname={groupclasses}>           <label             classname={labelclasses}             htmlfor={this.props.id}>             {this.state.invalidmessage ?               this.state.invalidmessage : this.props.label}           </label>            <input type={this.props.type}                  classname="form-control"                  id={this.props.id}                  ref="inputfield"                  onfocus={this.handlefocus.bind(null, true)}                  onblur={this.handlefocus.bind(null, false)}                  onchange={this.handlechange}                  disabled={this.props.disabled} />         </div>       );     } else if (this.props.type === 'submit') {       formelement = (         <div>           <button type="submit"                   classname="btn btn-primary"                   disabled={this.props.disabled}>{this.props.label}           </button>         </div>       );     }      return formelement;   } }); 

the flux pattern used handling data between server , components. use app.store handling state effects more 1 component , api.store handling actions deal server api (requesting or saving data).

if scope of state regarding single component can contain state within component.