Patterns for using stores with form-heavy views.

[bradobro]

After testing Flummox out against half a dozen other Flux implementations, I'm really liking some of its subtle decisions.

I'm wrestling how to use Flux stores in a form-heavy React view. Seems the most natural thing runs something like this:

1. Bind the form inputs to the appropriate store state attributes.
2. Handle user edits by dispatching something like updatePersonStore("firstName","Harrie")
3. Repeat for all the form fields.

...which starts to seem a lot like two-way data binding, except I have to wire it up by hand.

When I have scouted for better patterns they seem to fall into two categories:

1. Simplistic forms with one or two inputs (usually ToDo apps).
2. React form libraries that don't seem to embrace Flux architecture.

I'm asking here because I'm toying with a way to automate some of this with a subclass of Flummox.Store, but I'm not sure that's the right path.

[hakanderyal]

I'm using React + Flummox with complex forms.

You can automate the binding like this:

<FormInput connectTo='someStore' inputName='email'/>

Than something like that on the FormInput component:

onChange() {
    this.props.flux.formActions.updatePersonStore(this.props.inputName, this.state.value);
}

This way, you don't have to add update functions to each input separately.

You can also use callbacks to update a top level Form component from child inputs, and update the store from that component.

I'm using both, haven't encountered major problems so far.

[bradobro]

Thanks for the examples @hakanderyal.

Digging a bit more, in a post from 2013, a Facebook employee talks about using React for form-heavy apps, and post this gist, which hints back to the two-way-binding helpers page.

I'd largely ignored that page in the docs, hoping I'd never need it, but they mention the same problem with wiring up a lot of onChange handlers: "This works really well and it's very clear how data is flowing, however, with a lot of form fields it could get a bit verbose."

Digging into the React code, looks like the React inputs look for a valueLink prop that gets special treatment. This isn't just in the addons; it looks pretty deeply baked in. See LinkedValueUtils.js and seems to automate a pattern similar to what we've been talking about (except it's not Flux-style; it uses setState instead of dispatching a message).