Package Exports

react-redux-form

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-redux-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Redux Form

Latest Version: 0.8.2 Read the release docs!

Read the Full Documentation

Or read the gitbook (most up-to-date)!

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

Features

Separation of model state and form state for simplicity and performance
Ability to use existing reducers easily
Sync and async field validation at any part of the state
Convenient <Field> component for automatically mapping props to native form controls
Support for Immutable.JS: import { createModelReducer } from 'react-redux-form/immutable'
Support for React-Native and custom components
Multiple utility model actions

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 } from 'react-redux-form';

class MyForm extends React.Component {
  render() {
    let { user } = this.props;
    
    return (
      <form>
        <h1>Hello, { user.name }!</h1>
        <Field model="user.name">
          <input type="text" />
        </Field>
      </form>
    );
  }
}

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