Beauty of Compose

connectRoleForm.js

import UpdateRoleForm from './updateRoleForm';
const mapStateToprops = (state, ownProps) => {
return {
    initialValues: ownProps.role,
    form:`update_role_form${(ownProps.role.id).toString()}`
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    serviceUpdateRole: (data, resolve, reject) => {
      dispatch(RolesActions.serviceUpdateRole(data, resolve, reject));
    }
  };
};
const reduxUpdateRoleForm = reduxForm({
    destroyOnUnmount: false,
})(UpdateRoleForm);

export default connect(
  mapStateToprops,
    mapDispatchToProps
)(reduxUpdateRoleForm);

refcatorConnectRoleForm.js

import UpdateRoleForm from './updateRoleForm';
import {compose} from 'redux';

const mapStateToprops = (state, ownProps) => {
return {
    initialValues: ownProps.role,
    form:`update_role_form${(ownProps.role.id).toString()}`
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    serviceUpdateRole: (data, resolve, reject) => {
      dispatch(RolesActions.serviceUpdateRole(data, resolve, reject));
    }
  };
};
const reduxUpdateRoleForm = reduxForm({
    destroyOnUnmount: false,
});
const reduxUpdateRoleForm = compose(mapStateToProps, mapDispatchToProps, reduxUpdateRoleForm),
export default reduxUpdateRoleForm(updateRoleForm);

updateRoleForm.js

import React from 'react'

const UpdateRoleForm = ({role, serviceUpdateRole}) => {
   return (
     <Panel>
     <Field
       name="name"
       component={ (props) => { <input {...props.input} />}
       placeholder="role name"
      />
      <Field
       name="description"
       component={ (props) => { <input {...props.input} />}
       placeholder="role description"
      />
    </Panel>
   )
}
export default UpdateRoleForm