How to set initialValues based on async source such as an ajax call with redux-form

EDIT: Updated Solution from ReduxForm docs

This is now documented in the latest version of ReduxForm, and is much simpler than my previous answer.

The key is to connect your form component after decorating it with ReduxForm. Then you will be able to access the initialValues prop just like any other prop on your component.

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()InitializeFromStateForm = reduxForm({  form: 'initializeFromState'})(InitializeFromStateForm)// now set initialValues using data from your store stateInitializeFromStateForm = connect(  state => ({    initialValues: state.account.data   }))(InitializeFromStateForm)

I accomplished this by using the redux-form reducer plugin method.

The following demos fetching async data and pre-populating a user form with response.

const RECEIVE_USER = 'RECEIVE_USER';// once you've received data from api dispatch actionconst receiveUser = (user) => {    return {       type: RECEIVE_USER,       payload: { user }    }}// here is your async request to retrieve user dataconst fetchUser = (id) => dispatch => {   return fetch('http://getuser.api')            .then(response => response.json())            .then(json => receiveUser(json));}

Then in your root reducer where you include your redux-form reducer you would include your reducer plugin that overrides the forms values with the returned fetched data.

const formPluginReducer = {   form: formReducer.plugin({      // this would be the name of the form you're trying to populate      user: (state, action) => {         switch (action.type) {             case RECEIVE_USER:                return {                  ...state,                  values: {                      ...state.values,                      ...action.payload.user                  }               }            default:               return state;         }      }   })};const rootReducer = combineReducers({   ...formPluginReducer,   ...yourOtherReducers});

Finally you include you combine your new formReducer with the other reducers in your app.

Note The following assumes that the fetched user object's keys match the names of the fields in the user form. If this is not the case you will need to perform an additional step on the data to map fields.

By default, you may only initialize a form component once via initialValues. There are two methods to reinitialize the form component with new "pristine" values:

Pass a enableReinitialize prop or reduxForm() config parameter set to true to allow the form the reinitialize with new "pristine" values every time the initialValues prop changes. To keep dirty form values when it reinitializes, you can set keepDirtyOnReinitialize to true. By default, reinitializing the form replaces all dirty values with "pristine" values.

Dispatch the INITIALIZE action (using the action creator provided by redux-form).

Referenced from : http://redux-form.com/6.1.1/examples/initializeFromState/

Could you fire the dispatch on componentWillMount(), and set the state to loading.

While it is loading, render a spinner for example and only when the request returns with the values, update the state, and then re-render the form with the values??