Flux Testing

Question

I use flux in my application, where I use Backbone.Viewas a presentation layer.

As a rule, a store’s instance is stored for the entire page, application data (or state) is stored in the store, and the view will listen to the event change store, when the storeevent fires change, the view will be redrawn accordingly.

So far, so good, however, I encounter some problems when using the form, when you try to submit a form or event blurtriggered for an element, I want to check the server input and display errors as soon as possible, this is what I did:

• when the user clicks the submit button or the value changed for the item, I will send an action like: dispatch({type:"validate",value:"value"});

• store will respond to this action and send a request to the server

• When the response returns, I update the repository and fire the event change: store.validate_response=response; store.trigger("change");

• The view (the form in the example) will redisplay itself.

I can display errors, but I can’t save the value of the element, because the elements in the form are redrawn, which means that they will display the initial value, and not the value entered by the user.

I thought that saving the entered values ​​also when sending the validation action as follows:

dispatch({type:"validate",value:"value",userTypedValueForEveryElement:"....."});

It works when use presses the submit button, as usually when they press the button, they will not enter anything in the form, but what about this situation:

<input type="text" id="A" />
<input type="text" id="B" />

avalue input A, bv input B, :

{a:"avalue",b:"bv"}

store .

B, bvalue, , , avalue A bv B, , B, , , .

?

, flux:

view trigger action --> 
store respond to actions --> 
store trigger changed -->
view respond to store(re-render in most case) --> 
view trigger action" 

, . , , .

, - ?

Answer 1

, , . , , , , .

:. -, ? Flux, Backbone Model, . Flux ( ) - , . , . . , , - . , {val: 'someInput', isValid: false}. , ; , /.

@korven , - . AJAX , AJAX, ; .

: -, , - . - throttle debounce (, debounce) . ( , , .) . , , . , DOM, , .

/debouncing, , () , , . , ; , . ( . , , , .) , , , , . , , "" . , :

// something in your view
this.on(keyup, function() {
  var input = this.getUserInput();
  validationService.validate(input);
}

// within validationService
validate: function(input) {
  // generate random int between 1 and 100
  var randKey = Math.floor(Math.random() * (100 - 1)) + 1;
  this.lastRequestKey = randKey;
  this.doAjaxRequest({
    data: {input: input},
    callback: function() {
      if (randKey !== this.lastRequestKey) {
        // a newer request has modified this.lastRequestKey
        return;
      }
      // do something to update the Store 
  });
}

, , "" "" . , , , . , , , . , "" , B A. , , , . / .

:. Flux, "" , / , , . , Store , . B, A, , A B . ( , , . , React w/Flux.)

- , - . Flux , .

Answer 2

, . , .

https://www.npmjs.com/package/jsov

, , , , . onChange, (, , ), , ,

    onChange:function(){
        var validated_response=JsOV.schemaValidator(Schema,Store.getResponse());
        this.setState({data:validated_response});
    }

P.S: , . , .