forms.jsx

// @flow
import type { State } from '../types';
import Form from '../components/form';
import TextInput from '../components/text-input';
import { connect } from 'react-redux';
import { setUserForm } from '../lib/forms/actions';

const UserForm = ({ id, user, setUserForm }) => {
  // If you know how to type it better, please let me know.
  const onChange = (prop: $Keys<typeof user>) => state => {
    setUserForm(id, { ...user, [(prop: string)]: state });
  };

  const submit = () => {
    // save
    console.log(user);
    // reset
    setUserForm(id, null);
  };
  return (
    <Form>
      <TextInput
        // Note we are not using name attribute. It's useful probably only for
        // browser auth pre-filling. Also, it's not universal.
        label="Name"
        placeholder="Jane Doe"
        value={user.name}
        onChange={onChange('name')}
      />
      <TextInput
        label="Description"
        placeholder="..."
        value={user.description}
        onChange={onChange('description')}
      />
      <Button primary onPress={submit} type="submit">
        Submit
      </Button>
    </Form>
  );
};

// Don't abstract this. It's good as is. We can't predict the future, so we
// can't abstract it. For example, we can compose many forms and actions here.
const EditableUserForm = connect(
  ({ forms: { user } }: State, { id = '' }) => ({
    id,
    user: user.changedState[id] || user.initialState,
  }),
  { setUserForm }
)(UserForm);

const Forms = () => (
  <Page title="Forms">
    <Heading size={3}>Forms</Heading>
    <P>Simple, fast, and dynamic Redux forms.</P>
    <EditableUserForm />
  </Page>
);

What's your concern with https://gist.github.com/steida/bf917c837d2297518b72e346ab9da1d1#file-forms-jsx-L9?

Ah, I see now, maybe the fact, that it will accept any state value.