Question about .at and .set vs direct .value assignment about nestedlink HOT 4 CLOSED

Yes, there is the difference. Direct assignment won't call component.setState(), so render won't be called. With is rather good for this example, but in general it's not correct.

And when you're doing it in a loop like in the first example, setState will be called too many times.

I would try something like this:

const rulesLink = Link.state(this, 'rules');  //An array of objects

const activeLink = Link.state(this, 'rules_active')
  .onChange( enabled => {
      rulesLink.update( rules => {
          rules.forEach( rule => rule.active = enabled );
          return rules;
      );
  });

link.update will shallow copy enclosed array or object, and pass it through the given transform function. In this case it might work okay, as you'll have two subsequent setState calls. They are not transactional, though; you might get two renders.

If you need to do complex things like this (attach listeners to the changes, and transactional state updates), it's better to use https://github.com/Volicon/NestedReact, That's what we do. It will allow you to separate state logic from the render function and links.

state : {
    rules : Rule.Collection,
    rules_active : false
},

componentWillMount(){
  const { state } = this;

  this.listenTo( state, 'change:rules_active', () => {
    state.rules.each( rule => rule.active = state.rules_active );
  })
}

render(){
  const rulesLink = this.state.getLink( 'rules' );
  ...
}

You have to define model class for Rule in this case. Like this:

const Rule = Model.extend({
    attributes : {
        active : false,
        name : ''
    }
});

There are application examples inside of the NestedReact repo.

from nestedlink.

So, NestedReact is like mobx, but it has two-way data binding (using these links), REST endpoints, and an application state is serializable by default.

Also, you have more explicit control on change events and execution of transactions. In this example, for instance, there will be just one render call (when you modify an object inside of change:attr event handler, it will be executed in the scope of the same transaction thus no extra state change events will be emitted).

from nestedlink.

NestedReact looks really nice! Thanks for the examples and reply. I'll have to investigate it sometime (might not have time to use it due to the sheer amount of things in the backlog at work).

Also thank you very much for making ValueLink (now NestedLink?), it really allows easy ways to make forms in React. I played around with vue.js and I liked the simplicity of that framework much more than the typical react-flux. I was really happy to find this library when searching for ways to simplify two-way binding on form components with a single source of truth. Definitely cuts down on boilerplate code.

from nestedlink.

Just don't forget @define if you're using ES6 classes in NestedReact.

from nestedlink.