local.md

Local Forms

As of version 1.2.0, React Redux Form supports local forms. What does this mean? Here's an example:

import React from 'react';
import { LocalForm, Control } from 'react-redux-form';

export default class MyApp extends React.Component {
  handleChange(values) { ... }
  handleUpdate(form) { ... }
  handleSubmit(values) { ... }
  render() {
    return (
      <LocalForm
        onUpdate={(form) => this.handleUpdate(form)}
        onChange={(values) => this.handleChange(values)}
        onSubmit={(values) => this.handleSubmit(values)}
      >
        <Control.text model=".username" />
        <Control.text model=".password" />
      </LocalForm>
    );
  }
}

And just like that, you have a fully functioning form with controls that do everything that RRF's normal forms and controls already do -- handling of model updates on change/blur, updating focus, pristine, touched, validity, submitted, pending, etc. and more -- without needing to setup Redux*.

The <LocalForm> component takes all the props from the <Form> component, with four important props:

• model="..." (String): the name of the model in the internal state. This is completely optional, as the model is not related to any external Redux store (default: "local")
• onUpdate={(formValue) => ...} (Function): a handler that is called whenever the form value is updated
• onChange={(modelValue) => ...} (Function): a handler that is called whenever the form's model value is changed
• initialState={...} (Any): the initial state of the model (default: {})

Notes

• redux and react-redux are still required as peer dependencies. This just allows you to not have to set up the boilerplate; e.g., the store and reducers.
• As with any React component, whenever the <LocalForm> is unmounted, the component's internal state is gone. This can be desirable (or undesirable) depending on your use case, so take this into consideration.
• Just like with <Form>, the props onSubmit and onSubmitFailed will work as expected.