best solution to using Redux with ant design form

I'm building a web application based on Clean-UI template using ant design. here is my question about using redux in my project. what is best practice to using Redux with ant design? should I use Redux-form or RC-form? is there any built-in solution with ant design to using Redux?

second question : I'm trying to build a form with a checkbox group. when each of my checkboxes is checked the state in redux will change but I'm not able to set state value in my UI. how can I use "mapPropsToFields"?

here is my code :

import React from 'react'
import { connect } from 'react-redux'
import { Checkbox, Row, Col, Form } from 'antd'

function onChange(checkedValues) {
  console.log('checked = ', checkedValues)

const group = ["Trustee", "Defendant", "Client", "Applicant", "Potential Client", "Third Party", "Client Contact", "Family Law Interest", "Barrister", "Husband", "Correspondence", "Doctor", "Court", "Wife", "ICL", "Test Contact GRP", "Solicitor", "Potential Conflict", "sahar_contact_grp", "Plaintiff", "BBS Creditor", "Expert Witness",];

class ContactGroups extends React.Component {
  render() {
    const { form } = this.props
    const { getFieldDecorator } = form
    return (
          {getFieldDecorator('groups', {
            valuePropName: 'checked',
            <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
                { => (
                  <Col span={8} key={item}>
                    <Checkbox value={item}>{item}</Checkbox>

const NewContactGroups = Form.create({
  name: 'new_contact_contactGroup',
  onFieldsChange(props, changedFields) {
    const { dispatch } = props
      type: 'contact/SET_STATE',
      payload: changedFields,
  mapPropsToFields(props) {
    return {
      groups: Form.createFormField(props.groups),

const mapStateToProps = state => {

export default connect(mapStateToProps)(NewContactGroups)



You can use this boilerplate along with ant design . This works fine with ant design.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.