title: Redux-Form initial values from
body: <p>I'm trying to fill the profile form with data from API. Unfortunately redux-form doesn't want to cooperate with me in this case. For some reason fields stays empty whatever I do. </p>
  
  <p>Setting the fixed values instead of values passed from reducer work well for some reason. </p>
  
  <p>Maybe this is because I'm using <strong>redux-promise</strong> for API calls inside the action creators? How can I live with it and get rid of this. Here is my form component.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { reduxForm, Field } from 'redux-form';
  import { connect } from 'react-redux';
  import { fetchRoleList, fetchUserData } from '../actions';
  
  class UserEdit extends Component {
  
      componentWillMount() {
          this.props.fetchRoleList();
          this.props.fetchUserData();
      }
  
      handleEditProfileFormSubmit(formProps) {
          console.log(formProps);
      }
  
      getRoleOptions(selected_id) {
          if (!this.props.profile) {
              return &lt;option&gt;No data&lt;/option&gt;;
          }
  
          return this.props.profile.roles.map(role =&gt; {
              return &lt;option key={role.role_id} value={role.role_id}&gt;{role.name}&lt;/option&gt;;
          });
      }
  
      renderField(props) {
          const { input, placeholder, label, value, type, meta: { touched, error } } = props;
          return (
          &lt;fieldset className={`form-group ${ (touched &amp;&amp; error) ? 'has-error' : '' }`}&gt;
              &lt;label&gt;{label}&lt;/label&gt;
              &lt;input className="form-control" {...input} type={type} placeholder={placeholder} /&gt;
              {touched &amp;&amp; error &amp;&amp; &lt;div className="error"&gt;{error}&lt;/div&gt;}
          &lt;/fieldset&gt;
          );
      }
  
      renderSelect({ input, placeholder, options, label, type, meta: { touched, error } }) {
          return (
          &lt;fieldset className={`form-group ${ (touched &amp;&amp; error) ? 'has-error' : '' }`}&gt;
              &lt;label&gt;{label}&lt;/label&gt;
              &lt;select className="form-control" {...input}&gt;
                  {options}
              &lt;/select&gt;
              {touched &amp;&amp; error &amp;&amp; &lt;div className="error"&gt;{error}&lt;/div&gt;}
          &lt;/fieldset&gt;
          );
      }
  
      render() {
          const { handleSubmit } = this.props;
  
          const user = this.props.profile.user;
  
          return (
          &lt;div&gt; {user ? user.email : ''}
              &lt;form onSubmit={handleSubmit(this.handleEditProfileFormSubmit.bind(this))}&gt;
                  &lt;Field name="email" label="Email:" component={this.renderField} type="text" placeholder="email@gmail.com" className="form-control"/&gt;
                  &lt;Field name="name" label="Name:"  component={this.renderField} type="text" placeholder="John Doe" className="form-control"/&gt;
                  &lt;Field name="role" label="Role:" component={this.renderSelect} type="select" className="form-control" options={this.getRoleOptions()}/&gt;
                  &lt;button action="submit" className="btn btn-primary"&gt;Edit user&lt;/button&gt;
  
                  &lt;Field name="password" label="Password:" component={this.renderField} type="password" className="form-control"/&gt;
                  &lt;Field name="passwordConfirm" label="Confirm Password:" component={this.renderField} type="password" className="form-control"/&gt;
                  { this.props.errorMessage
                  &amp;&amp;  &lt;div className="alert alert-danger"&gt;
                          &lt;strong&gt;Oops!&lt;/strong&gt; {this.props.errorMessage}
                      &lt;/div&gt; }
                  &lt;button action="submit" className="btn btn-primary"&gt;Sign up!&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          );
      }
  
  }
  
  let InitializeFromStateForm = reduxForm({
      form: 'initializeFromState'
  })(UserEdit);
  
  InitializeFromStateForm = connect(
    state =&gt; ({
      profile: state.profile,
      initialValues: state.profile.user
    }),
    { fetchRoleList, fetchUserData }
  )(InitializeFromStateForm);
  
  export default InitializeFromStateForm;
  </code></pre>
  
  <p>I do believe action creator will be useful as well:</p>
  
  <pre><code>export function fetchUserData(user_id) {
      user_id = user_id ? user_id : '';
  
      const authorization = localStorage.getItem('token');
      const request = axios.get(`${ROOT_URL}/user/${user_id}`, {
        headers: { authorization }
      });
  
      return {
          type: FETCH_USER,
          payload: request
      };
  }
  </code></pre>