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.


Comments

Post a Comment

Popular posts from this blog

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

recursion - Can every recursive algorithm be improved with dynamic programming? -

i first year undergraduate csc student looking competitive programming. recursion involves defining , solving sub problems. understand, top down dynamic programming (dp) involves memoizing solutions sub problems reduce time complexity of algorithm. can top down dp used improve efficiency of every recursive algorithm overlapping sub problems? dp fail work , how can identify this? the short answer is: yes. however, there constraints. obvious 1 recursive calls must overlap. i.e. during execution of algorithm, recursive function must called multiple times same parameters. lets truncate recursion tree memoization. can use memoization reduce number of calls. however, reduction of calls comes price. need store results somewhere. next obvious constraint need have enough memory. comes not-so obvious constraint. memory access requires time. first need find result stored , maybe copy location. in cases, might faster let recursion calculate result instead of loading somewher...
Read more

c - Why does alarm() cause fgets() to stop waiting? -

i playing around signals in c. main function asks input using fgets(name, 30, stdin) , , sits there , waits. set alarm alarm(3) , , reassigned sigalrm call function myalarm calls system("say pay attention") . after alarm goes off, fgets() stops waiting input , main fn continues on. happens if change myalarm set variable , nothing it. void myalarm(int sig) { //system("say pay attention"); int x = 0; } int catch_signal(int sig, void (*handler)(int)) { // when signal comes in, "catch" , "handle it" in way want struct sigaction action; // create new sigaction action.sa_handler = handler; // set it's sa_handler attribute function specified in header sigemptyset(&action.sa_mask); // "turn signals in sa_mask off?" "set sa_mask contian no signals, i.e. nothing masked?" action.sa_flags = 0; // not sure, looks aren't using of available flags, whatever may return sigaction(sig, ...
Read more