connect antd Form to redux with one API. compare to redux-form

Usage no npm install needed!

<script type="module">
  import antdFormRedux from '';


Connect antd Form to redux


npm install antd-form-redux --save


Connect antd Form to redux use "reduxForm" HOC. If you are familiar with redux-form, you will find it very the same. If you are new to Form and redux, it is also very simple since it just use one API.

You just need 2 steps:

Step-1. add reducer to your reducers

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'antd-form-redux';

//import other reducers
const rootReducer = combineReducers({
  form: formReducer,

Step-2. Use reduxForm(config) to connect component

import { reduxForm } from 'antd-form-redux';

class NormalAntdForm extend Compoent {
  // ...
  render() {
    // ...
    const { test } = this.props;
    const { getFieldDecorator } = this.props.form;
    // use antd's pattern :
    // getFieldDecorator('fileds', .....)
    // ...

export default reduxForm({
  form: 'test',  //the name of the form data store

Note: you should also use the antd getFieldDecorator to do field bind and value check there is no support like redux-form's Field or validate.

Configure options:

This project make effort to use antd likes redux-form, these are supported configures now:

form : String [required]

Object<String, String> [optional]

enableReinitialize : boolean [optional]

keepDirtyOnReinitialize : boolean [optional]

destroyOnUnmount : boolean [optional]

forceUnregisterOnUnmount : boolean [optional]

getFormState : Function [optional]

onChange : Function [optional]

  • values : Object
  • dispatch : Function
  • props : Object
  • previousValues : Object

immutableProps : Array [optional]

onSubmitFail : Function

  • errors : Object
  • dispatch : Function
  • submitError : Error
  • props : Object

onSubmitSuccess : Function [optional]

  • result : Object
  • dispatch : Function
  • props : Object

onSubmit : Function

  • values : Object
  • dispatch : Function
  • props : Object

Action creators

There is also supplied redux-form likes action creators:

initialize(form, data)

data : { fields, ....} use fields to set initialValues, you donnot use this action usually


delete the form data from store you donnot use this action usually

change(form, fields)

change the form fields values


set submitting to true

stopSubmit(form, errors)

set submitting to false


set submitFailed to false


set submitFailed to true


delete all errors

Note: if you want to get/set the submitting state, server validate errors to the form reducer, you would dispatch actions on your own, this is usually done in side effect handlers, such as rudux-thunk, redux-promise, redux-saga, redux-observable, etc.


The props listed here are the props that generated to give to your decorated form component.

reset : Function

reset the form values to initialValues

initialize : Function(values)

initialize the form values to values


this is a example according to antd docs:

import React, {Component} from 'react'
import { reduxForm } from 'antd-form-redux';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
  render() {
    const {login} = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
            <Checkbox>Remember me</Checkbox>
          <a className="login-form-forgot" href="">Forgot password</a>
            Log in
          Or <a href="">register now!</a>

const WrappedNormalLoginForm = reduxForm({
  form: 'login',  //the name of the form data store
  onSubmit: function(values, dispatch, props) {
      //do with values, dispatch , props
      console.log('Received values of form: ', values);

Note: you can also give onSubmit as props from parent Component.