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="">
  <input type="text" />

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:

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 />
// 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 (
        <Field model="user.username">
          <input type="text" />

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

          Log in as { user.username }

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

export default connect(selector)(LoginForm);

results matching ""

    No results matching ""