react redux form

React Redux Form is a collection of action creators and reducer creators that makes building complex and custom forms with React and Redux simple.

If you know React and Redux, you know React-Redux-Form.

It also provides the helpful <Field model="..." /> component for mapping controls to form and model changes quickly.

Instead of answering "How would I do this with this library?", React Redux Form answers "How would I do this in Redux?", and provides a thin layer to help abstract the pain points of creating complex, dynamic forms with Redux and React.

import { Field } from 'react-redux-form';

// in your component's render() method
<Field model="user.name">
  <input type="text" />
</Field>

React Redux Form:

• handles model value changes for any object/array
• provides utility actions for manipulating state
• handles control updates, such as focus, blur, pristine, etc.
• keeps track of validity on any part of your model
• allows for completely dynamic and deep forms
• keeps your model state intact, which allows you to have full control of your model reducer

Useful Components:

• <Form>
• <Field>
• <Errors>

Getting Started

1. Install the prerequisites:
   • npm install react redux react-redux --save
   • (recommended) npm install redux-thunk --save
2. npm install react-redux-form --save

Full Example

// app.js

import React from 'react';
import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';
import { modelReducer, formReducer } from 'react-redux-form';

import LoginForm from './forms/login-form';

const store = createStore(combineReducers({
  user: modelReducer('user'),
  userForm: formReducer('user')
}));

export default class App extends React.Component {
  render() {
    return (
      <Provider store={ store }>
        <LoginForm />
      </Provider>
    )
  }
}

// forms/login-form.js

import React from 'react';
import { connect } from 'react-redux';
import { Field } from 'react-redux-form';

class LoginForm extends React.Component {
  render() {
    let { user } = this.props;

    return (
      <form>
        <Field model="user.username">
          <label>Username</label>
          <input type="text" />
        </Field>

        <Field model="user.password">
          <label>Password</label>
          <input type="password" />
        </Field>

        <button>
          Log in as { user.username }
        </button>
      </form>
    )
  }
}

const selector = (state) => ({ user: state.user });

export default connect(selector)(LoginForm);