imjerrybao/react-redux-form

Create forms easily in React with Redux.

React Redux Form

Read the Full Documentation

React Redux Form is a collection of reducer creators and action creators that make implementing even the most complex and custom forms with React and Redux simple and performant.

npm install react-redux-form --save

• Guides
  • Quick Start
  • Model Reducers
  • Form Reducers
  • React Native & Custom Components
  • Validation
  • Tracking Collections
  • FAQs
• API Reference
  • Model Action Creators
  • Field Action Creators
  • Validation Action Creators
  • Model Reducer
  • Form Reducer
  • <Field> Component
  • <Form> Component
  • <Errors> Component

Quick Start

Be sure to read the step-by-step guide in the documentation.

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

import MyForm from './components/my-form-component';

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

class App extends React.Component {
  render() {
    return (
      <Provider store={ store }>
        <MyForm />
      </Provider>
    );
  }
}

// ./components/my-form-component.js'
import React from 'react';
import { connect } from 'react-redux';
import { Field, Form } from 'react-redux-form';

class MyForm extends React.Component {
  handleSubmit(val) {
    // Do anything you want with the form value
    console.log(val);
  }
  
  render() {
    let { user } = this.props;
    
    return (
      <Form model="user" onSubmit={(val) => this.handleSubmit(val)}>
        <h1>Hello, { user.name }!</h1>
        <Field model="user.name">
          <input type="text" />
        </Field>
        <button>Submit!</button>
      </Form>
    );
  }
}

export default connect(state => ({ user: state.user }))(MyForm);

Posting Issues

When posting an issue, please include a detailed description along with a relevant code sample. Attaching a failing test case with your issue will go a long way and is much appreciated.