react-managed-state v1.0.2

React Managed State

The managed state library allows you to set up and manage states that can be bound to one or more React components. In addition, each state can maintain a mutator, to allow forms to easily modify the state and notify the bound components.

At Motili (http://www.motili.com) we find this to be extremely useful when we have large pages that display a lot of state, combined with forms or managed fields that must modify parts of that state. In those cases, the react render lifecyle can make for exceptionally slow text input on the fields.

From this library, a ManagedState object can be used to define a chunk of state that notifies any subscribers when it is updated. A FormState object, additionally maintains a mutator that can be used to mutate the state from a managed input component. As follows:

Follow updates to react-managed-state on Twitter @gpasq (http://www.twitter.com/gpasq).

Main Form

this.formState = new FormState({
    address1: '',
    address2: '',
    city: '',
    state: '',
    zip: ''
});

...

<PropertyInfoEditor formState={this.formState}/>
            

PropertyInfoEditor Control

class PropertyInfoEditor extends React.Component {
    constructor(props) {
        super(props);
        this.props.formState.subscribe(this);
    }

    ...
    
    render() {
        var data = this.props.formState.getState();
        var mutator = this.props.formState.getMutator();

    ...
    
        <label>ADDRESS 1:</label>
        <input value={data.address1} onChange={mutator.mutate('address1')}></input><br/>
        
        <label>CITY:</label>
        <input value={data.city} onChange={mutator.mutate('city')}></input><br/>
     ...
    }
}
            

In the above example, any time "formState" is updated, the render method of the PropertyInfoEditor is called. As you can infer from the example, though the page may maintain a large state with a multitude of data, much smaller tailored states can be managed and shared with various page components, and fast, simple, re-rendering of single components can occur.

React Native

The react-managed-state library should also run on react-native.

TODO:

• Put source into github
• Define tests