Possible bug when used with react-redux

[danielepiccone]

When exporting a FormField decorated with connect(), somehow the form api breaks and the field does not re-render with the new values.

I believe this happens whatever higher order component is used to decorate the form, as long as this is using connect().

I have uploaded a sample app showing the bug here https://github.com/dpiccone/react-form-redux-bug

[danielepiccone]

It turns out the problem is solved by passing { pure: false } as an option to connect() since redux assumes a component to receive updates either from props or from the store.

Alternatively you could use something like this, by connecting the component that receives the formAPI inside the FormField

import React from 'react';
import { FormField } from 'react-form';
import { connect } from 'react-redux';

function FormInput({ foobar, getValue, setValue }) {
  const value = getValue() || 0;
  const onClick = () => {
    setValue(value + 1);
  }

  return (
    <div>
      <p>click me</p>
      <p>{foobar}</p>
      <button onClick={onClick}>Clicked { value } times</button>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    foobar: state.value
  }
};

FormInput = connect(mapStateToProps)(FormInput)

function Input(props) {
  return (
    <FormField field='foo'>
      {props => <FormInput {...props} />}
    </FormField>
  )
};

export default Input;

Or alternatively:

import React from 'react';
import { FormField } from 'react-form';
import { connect } from 'react-redux';
import { compose } from 'redux';

function withFormField(field) {
  return WrappedComponent => props => {
    return (
      <FormField field={field}>
        {(formApi) => {
          const allProps = {
            ...props,
            ...formApi
          };
          return (
            <WrappedComponent {...allProps} />
          )
        }}
      </FormField>
    )
  }
}

function Input({ foobar, getValue, setValue }) {
  const value = getValue() || 0;
  const onClick = () => {
    setValue(value + 1);
  }

  return (
    <div>
      <p>click me</p>
      <p>{foobar}</p>
      <button onClick={onClick}>Clicked { value } times</button>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    foobar: state.value
  }
};

export default compose(
  withFormField('foo'),
  connect(mapStateToProps)
)(Input);

Is there any reason FormField is not provided as an higher order component but instead one should pass a function as the first child?

[tannerlinsley]

It was previously. Technically you could easily create your own HOC that utilizes the current form component implementation under the hood. :)