Values passed to redux-form initialValues are not rendered

Question

I have a problem rendering initialValues passed to a form using redux-form/immutable (v6.0.5) with a custom component:

// WRAPPER COMPONENT
import React from 'react';
import {connect} from 'react-redux';

import DocumentsEditForm from './documentsEditForm';

import {documentsGetOneInfo} from './../../../modules/documents/actions/documents_get_one_info';
import {documentsPut} from './../../../modules/documents/actions/documents_put';


@connect((state) => {
  return ({
    selectedDocument: state.getIn(['documents', 'selectedDocument']).toJS()
  });
})
class DocumentsEdit extends React.Component {

  static propTypes = {
    dispatch: React.PropTypes.func,
    isLoading: React.PropTypes.bool,
    routing: React.PropTypes.object,
    selectedDocument: React.PropTypes.object
  };

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
    this.props.dispatch(adminDocumentsGetOneInfo(this.props.routing.locationBeforeTransitions.query.id));
  }

  handleSubmit(data) {
    this.props.dispatch(documentsPut(data));
  }

  render() {
    const initialValues = (this.props.selectedDocument.id) ? {
      filename: this.props.selectedDocument.filename,
      id: this.props.selectedDocument.id
    } : {};

    return (
      <DocumentsEditForm
        enableReinitialize
        initialValues={initialValues}
        onSubmitDocumentsEditForm={this.handleSubmit}
      />
    );
  }
}

export default DocumentsEdit;

Here is the form component itself:

import React from 'react';
import {Field, reduxForm} from 'redux-form/immutable';
import {Button} from 'react-bootstrap';

import InputTextRedux from './../../shared/components/input_text_redux';
import InputSelectRedux from './../../shared/components/input_select_redux';

let DocumentsEditForm = (props) => {
  const {error, handleSubmit, pristine} = props;

  return (
    <form
      onSubmit={handleSubmit(props.onSubmitDocumentsEditForm)}
    >
      <Field
        component={InputTextRedux}
        disabled
        name="id"
        type="text"
      />
      <Field
        component={InputTextRedux}
        name="filename"
        type="text"
      />
      <Button
        type="submit"
      >
        {'Save'}
      </Button>
    </form>
  );
};

DocumentsEditForm.propTypes = {
  error: React.PropTypes.object,
  handleSubmit: React.PropTypes.func,
  onSubmitDocumentsEditForm: React.PropTypes.func,
  pristine: React.PropTypes.bool
};


documentsEditForm = reduxForm({
  form: 'documentsEditForm'
})(DocumentsEditForm);

export default DocumentsEditForm;

And here is the custom InputTextRedux component:

import React from 'react';
import {ControlLabel, FormControl, FormGroup, InputGroup} from 'react-bootstrap';

const InputTextRedux = (props) => {
  const {
    id,
    disabled,
    input,
    type
  } = props;

  return (
    <div>
      <FormGroup
        name={input.name ? input.name : ''}
      >
        <ControlLabel>
          {'Label'}
        </ControlLabel>
        <InputGroup>
          <FormControl
            disabled={disabled ? true : false}
            id={id ? id : input.name}
            onChange={(event) => {
              input.onChange(event.target.value);
            }}
            type={type ? type : 'text'}
            value={input.value ? input.value : ''}
          />
          <FormControl.Feedback />
        </InputGroup>
      </FormGroup>
    </div>
  );
};

InputTextRedux.propTypes = {
  disabled: React.PropTypes.bool,
  id: React.PropTypes.string,
  input: React.PropTypes.object,
  type: React.PropTypes.string,
};

export default InputTextRedux;

I can submit the form and get the correct initialValues passed to handleSubmit but I can't seem to get the values displayed.

According to DevTools redux-form/INITIALIZE gets called with the correct payload and also the state at state->form->documentsEditForm->values/initial is correctly updated.

I also tried loading fixed initialValues to rule out problems with the api call delay but I got the same result. "input: {value: ''}" is always an empty string in the Field props.

What I noticed was that inside the props the form component recieves the structure looks as follows:

props {
    ....
    initialValues: {
        __altered: false,
        _root: {
            entries: [
                [ 
                    'id',
                    '123456'
                ],
                [
                    'filename',
                    'test.txt'
                ]
            ]
        },
        size: 2
    },
    ....
}

If I try to set a field's value directly to "props.initialValues._root.entries[0][1] for example it works.

Also I noticed since the full form has a Field with name="size" that this value gets filled correctly with the value "2" from initialValues above. So it seems as if the form is looking at the wrong "level" of initialValues for the values. To test this I also tried naming a Field "__altered" and its value was correctly set to false.

What am I doing wrong? Thanks alot!

Answer 1

This has been resolved: See https://github.com/erikras/redux-form/issues/1744#issuecomment-251140419

Basically I had to import "redux-form/immutable" instead of "redux-form".